做過微信H5視頻的大胸弟們肯定受到過成噸的傷害甚至多到懷疑人生的地步，自動全屏，不能全屏，不能自動播放，Android，IOS，巴拉巴拉……多到令人發(fā)指！今天整理了一下相關(guān)的解決辦法，以上并不是全部解決了，但是起碼能打個60分……
第一步:設(shè)置 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"/>
注意：這個屬性需要在播放前設(shè)置好，播放之后設(shè)置無效
第二部：設(shè)置 x5-video-player-fullscreen 全屏方式
視頻播放時將會進(jìn)入到全屏模式
注：聲明此屬性，需要頁面自己重新適配新的視口大小變化。可以通過監(jiān)聽 resize 事件
來實(shí)現(xiàn)
<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
需要監(jiān)聽窗口大小變化(resize)實(shí)現(xiàn)全屏
window.onresize = function(){
test_video.style.width = window.innerWidth + "px";
test_video.style.height = window.innerHeight + "px";
}
第三部：設(shè)置 x5-video-orientation 播放器橫豎屏方向
橫屏
<video x5-video-orientation="landscape"/>
豎屏
<video x5-video-orientation="portrait"/>
跟隨手機(jī)自動旋轉(zhuǎn)
<video x5-video-orientation="landscape|portrait"/>
注: 此屬性只在聲明了 x5-video-player-type="h5" 情況下生效
第三步：設(shè)置playsinline不全屏播放
<video src="xxx.mp4" x5-video-player-type="h5" playsinline webkit-playsinline="true"></video>
第四部：設(shè)置 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
或者一大胸弟寫的：
此致，那個敬禮！
