做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步，自动全屏，不能全屏，不能自动播放，Android，IOS，巴拉巴拉……多到令人发指！今天整理了一下相关的解决办法，以上并不是全部解决了，但是起码能打个60分……
第一步:设置 x5videoplayertype 启用Ｈ5同层播放器
通过video属性“x5videoplayertype”声明启用同层H5播放器
x5videoplayertype支持的值类型：h5
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
注意：这个属性需要在播放前设置好，播放之后设置无效
第二部：设置 x5videoplayerfullscreen 全屏方式
视频播放时将会进入到全屏模式
注：声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听 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";
}
第三部：设置 x5videoorientation 播放器横竖屏方向
横屏
<video x5-video-orientation="landscape"/>
竖屏
<video x5-video-orientation="portrait"/>
跟随手机自动旋转
<video x5-video-orientation="landscape|portrait"/>
注: 此属性只在声明了 x5videoplayertype="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
或者一大胸弟写的：
此致，那个敬礼！
