video視頻全屏播放

作點擊圖片，全屏播放視頻，視頻播放後顯示領一張圖片，作到無縫鏈接避免黑屏，要注意的是

　　1視頻須要提早load(),

　　2監聽video的playing（）事件，當視頻開始播放的時候隱藏視頻1的封面圖

　　3當視頻結束的時候，監聽video的ended（）事件，令video.pause(),隱藏video所在的父級div.

　　或者 

　　監聽視頻播放的時間 ,在視頻結束以前 video.pause();如video總長5s,myVid.currentTime>4.2,則video.pause()

代碼以下

 

<style>

#start-videobox{

   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background: #fff url(../images/p1.png) no-repeat 0 0 /100% 100%;
   z-index: 10;
}

#videobox {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
}

#videobox video {
   height: 100%;
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
}

</style>

<!--點擊圖片播放視頻1-->
<div id="start-videobox">

    <div class="playbtn"></div>
</div>
<!--視頻位-->
<div id="videobox" class="video">
    <!--首頁 視頻1-->
    <video
            class="myVideos" id="video1"
            src="images/t1.mp4"
            preload="auto"
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="allow"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            x5-video-orientation="portraint"
            style="object-fit:fill">
    </video>
    <video
            class="myVideos" id="video2"
            src="images/t2.mp4"
            preload="auto"
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="allow"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            x5-video-orientation="portraint"
            style="object-fit:fill">
    </video>
    <video
            class="myVideos" id="video3"
            src="images/t3.mp4"
            preload="auto"
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="allow"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            x5-video-orientation="portraint"
            style="object-fit:fill">
    </video>
    <video
            class="myVideos" id="video4"
            src="images/t4.mp4"
            preload="auto"
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="allow"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            x5-video-orientation="portraint"
            style="object-fit:fill">
    </video>

</div>

<script>

var startbox= document.getElementById('startbox'),

var video1 = document.getElementById('video1'),

//安卓 IOS兼容 判斷
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('alertAdr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端

var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;

stylediv(videobox);
function stylediv(divId) {
  divId.style.width = bodyW + 'px';
  divId.style.height = bodyH + 'px';
}

function audioAutoPlay() {
  video1.load();
  video2.load();
  video3.load();
  video4.load();
}

audioAutoPlay();

$('#start-videobox .playbtn').on('click', function () {
  // $('#start-videobox').hide();
  video1.load();
  video1.play();
  $('#video1').show();
  $('.videobox').show();
});

video1.addEventListener("ended", function () {
  video1.pause();
  $(".selectbox").show();
});

//播放視頻的時候 圖片逐漸隱藏
video1.addEventListener('playing', function () {
  $('#start-videobox').fadeOut(800);
})

</script>