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>