video视频全屏播放

做点击图片，全屏播放视频，视频播放后显示领一张图片，做到无缝连接避免黑屏，要注意的是

1视频需要提前load(),

2监听video的playing（）事件，当视频开始播放的时候隐藏视频1的封面图

3当视频结束的时候，监听video的ended（）事件，令(),隐藏video所在的父级div.

或者 

监听视频播放的时间 ,在视频结束之前 ();如video总长5s,>4.2,则()

代码如下

 

<style>

#start-videobox{

   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background: #fff url(../images/) 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 __mceDel">">

    <div class="playbtn"></div>
</div>
<!--视频位-->
<div  class="video">
    <!--首页 视频1-->
    <video
            class="myVideos" 
            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" 
            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" 
            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" 
            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= ('startbox'),

var video1 = ('video1'),

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

var bodyW = ;
var bodyH = ;

stylediv(videobox);
function stylediv(divId) {
   = bodyW   'px';
   = bodyH   'px';
}

function audioAutoPlay() {
  ();
  ();
  ();
  ();
}

audioAutoPlay();

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

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

//播放视频的时候 图片逐渐隐藏
('playing', function () {
  $('#start-videobox').fadeOut(800);
})

</script>