微信H5视频全屏/不全屏/自动播放等相关问题解决

转载内容。

做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步，自动全屏，不能全屏，不能自动播放，Android，IOS，巴拉巴拉……多到令人发指！今天整理了一下相关的解决办法，以上并不是全部解决了，但是起码能打个60分……

第一步:设置 x5­video­player­type 启用Ｈ5同层播放器

通过video属性“x5­video­player­type”声明启用同层H5播放器
x5­video­player­type支持的值类型：h5

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

注意：这个属性需要在播放前设置好，播放之后设置无效

第二部：设置 x5­video­player­fullscreen 全屏方式

视频播放时将会进入到全屏模式
注：声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听 resize 事件
来实现

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

需要监听窗口大小变化(resize)实现全屏

window.onresize = function(){
test_video.style.width = window.innerWidth + "px";
test_video.style.height = window.innerHeight + "px";
}

第三部：设置 x5­video­orientation 播放器横竖屏方向

横屏

<video x5-video-orientation="landscape"/>

竖屏

<video x5-video-orientation="portrait"/>

跟随手机自动旋转

<video x5-video-orientation="landscape|portrait"/>

注: 此属性只在声明了 x5­video­player­type="h5" 情况下生效

第三步：设置playsinline不全屏播放

<video src="xxx.mp4" x5-video-player-type="h5" playsinline webkit-playsinline="true"></video>

第四部：设置 WeixinJSBridgeReady 自动播放

HTML

<video src="xxx.mp4" autoplay x5-video-player-type="h5" />

JS

document.addEventListener("WeixinJSBridgeReady", function() {
document.getElementById('video').play();
}, false);

注意：这个自动播放只能IOS支持，Android就无能为力了，但是也有解，Canvas可解，具体代码可以Google一下，比如:

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

或者一大胸弟写的：

https://www.bbsmax.com/A/ke5jVePV5r/

此致，那个敬礼。

来源：https://www.jianshu.com/p/e03407ef839d