解決微信瀏覽器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();
});