解决微信浏览器video全屏的问题

解决微信浏览器video全屏的问题

在微信浏览器里面使用video标签，会自动变成全屏，改成下面就好了，起码可以在video标签之上加入其他元素。

 <video id="videoID"webkit-playsinline="true" x-webkit-airplay="true"  playsinline="true"x5-video-player-type="h5"  x5-video-player-fullscreen="true" width="100%" height="100%" preload="auto" poster="" src="">

 </video>

 

还有个问题，在android的微信里面，就算加上了上面的属性，还会出现上下有黑边，不能全屏的问题。

解决办法：给video加上object-fit: fill;的style属性。

 

<div class="m-video J-video"></div>
<div class="m-video J-video"></div>
	<div class="video_pop">
	<video src="video/v.mp4" preload=""  controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>
	<span class="close"></span>
</div>		    

　　

.m-kv .m-video{width:100%;height:5rem;position:absolute;top:4.3rem;left:0;}
.video_pop{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 20;display: none;}
.video_pop video{width:100%;height:100%;display:inline-block;}
.video_pop .close{background: url(../images/more_sur.png) center/100% 100%;width:3.64rem;height:0.62rem;left: 50%;
    top: 72%;margin-left: -1.82rem;position:absolute;}

　　

$('.video_pop .close').tap(function(){
	$('.video_pop video')[0].pause();
	$('.video_pop').hide();
});
$('.J-video').tap(function(ev){
	$('.video_pop').show();
	$('.video_pop video')[0].play();
});