做過微信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 全屏方式
視頻播放時將會進入到全屏模式
注：聲明此屬性，需要頁面自己重新適配新的視口大小變化实胸∷眨可以通過監(jiān)聽 resize 事件
來實現(xiàn)
<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
需要監(jiān)聽窗口大小變化(resize)實現(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"/>
跟隨手機自動旋轉(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
或者一大胸弟寫的：
此致署咽，那個敬禮！
