https://x5.tencent.com/tbs/guide/web/x5-video.html
https://blog.csdn.net/u011384023/article/details/79669902
推荐看以上两个博客弄懂基本知识。下面代码已经实现在安卓微信视频的全屏播放。
基本属性如下:
<video
id="videoALL"
src="video/01.mp4"
poster="images/1.jpg" /*视频封面*/
preload="auto"
webkit-playsinline="true" /*这个属性是ios 10中设置可以
让视频在小窗内播放,也就是不是全屏播放*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x-webkit-airplay="allow"
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-player-fullscreen="true" /*全屏设置,
设置为 true 是防止横屏*/>
x5-video-orientation="portraint" /*播放器支付的方向,
landscape横屏,portraint竖屏,默认值为竖屏*/
style="object-fit:fill"
loop="loop"/*循环播放(不写不循环)*/
controls="controls" /*显示控制按键(不写不显示)*/
</video>
注意:一定要再<video>控件外加div,并且设置其z-index属性,不然其他控件将不能显示,而且没有功能
<style>
html,body{
margin: 0;
padding: 0;
width: 6.4rem;
height: 12.5rem;
position: relative;
}
.vbox{
width: 6.4rem;
height: 12.5rem;
position: absolute;
z-index: -2;
}
#video{
width: 6.4rem;
height: 12.5rem;
}
.fbox{
width: 6.4rem;
height: 12.5rem;
position: absolute;
z-index: 2;
}
.btn{
width: 1rem;
height: 1rem;
background: #f00;
margin: 4rem auto 0;
}
</style>
<div class="vbox">
<video id="video" loop webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" src='http://img.cdn.funqgame.com/video/rlr1.mp4'></video>
</div>
<div class="fbox">
<div class="btn"></div>
</div>
<script>
var bo = true;
var vid = document.getElementById("video");
$(".btn").click(function(){
if(bo){
vid.play();
bo = false;
}else{
vid.pause();
bo = true;
}
});
</script>