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

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

</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();

});

巴特西

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

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

最新文章

热门文章