在做移動端專案時，做個視訊播放是不可避免的，大部分情況下都是點選一個按鈕，視訊全屏播放，下面將對這個情況進行分析與記錄。

html:

<video height="100%" id="videoPlay1" playsinline preload="auto" src="video.mp4" type="video/mp4" width="100%" x5-video-player-type="h5" x5-video-player-fullscreen="true" hidden style="object-fit:fill;height:100vh;"></video>

其中，x5-video-player-fullscreen="true"是設定視訊全屏，hidden是設定視訊剛開始為隱藏狀態，style中的object-fit:fill; 為視訊在螢幕中的填充模式,有fill，cover和contain三種填充模式，可以根據需要設定。

js:

    var video1 = document.getElementById("videoPlay1");//獲取視訊元素
    var audio=document.getElementById("bg-music");//獲取背景音樂
    $('.learn').click(function () {
            audio.pause();//背景音樂暫停
            $('#videoPlay1').show();//視訊展示
            video1.play();//視訊播放
           
            video1.onended = function() {//視訊播放結束執行的函式
                $('#videoPlay1').hide();//視訊隱藏
                $(".music-btn").hasClass("pause")?audio.pause():audio.play();//音樂設定，如果音訊播放視訊前為暫停狀態，音樂依然暫停，如果為播放狀態，音樂播放
            };
    });
 

如有問題或是錯誤，歡迎留言。