微信网页全屏播放自动播放问题
video视屏播放在微信网页中的全屏自动播放一直是个很头疼的问提
1.自动播放问题
Android中是无法自动播放了，只能做用户引导页喽，微信app内核webkit版本低不支持
IOS中 加autoplay并且在onload事件之后调用一次play()
function onReady() {
Movies.play();
}
如果还是无法自动播放，
（方法一）引用微信jssdk，在wx.ready()回调函数中再调用一次video的play()方法，代码如下
wx.ready(function () {
Movies.play()
})
（方法二）设置 WeixinJSBridgeReady 自动播放
HTML
JS
document.addEventListener(“WeixinJSBridgeReady”, function() {
document.getElementById(‘video’).play();
}, false);
2.全屏问题，去除播放控件
使用h5同层播放方可解决
H5同层播放器接入规范
x5-video-player-type 启用Ｈ5同层播放器
通过video属性“x5-video-player-type”声明启用同层H5播放器
x5-video-player-type支持的值类型：h5
示例：
注： 这个属性需要在播放前设置好，播放之后设置无效，下面的’x5-video-player-fullscreen’也是一样
x5-video-player-fullscreen全屏方式
视频播放时将会进入到全屏模式
如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）
注： 声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现
需要监听窗口大小变化(resize)实现全屏
window.onresize = function(){
test_video.style.width = window.innerWidth + "px";
test_video.style.height = window.innerHeight + "px";
}
注: : 1. 为了让视频真正铺满全屏,可以适当让video的显示区域大于视口区域,这样在显示时在视口外的部截掉后,不会出四周黑边的情况
x5-video-orientation 控制横竖屏
功能：声明播放器支持的方向
可选值： landscape 横屏, portraint竖屏
默认值：portraint
e.g: http://res.imtt.qq.com/qqbrowser/js/test_video_orientation_attr.html
横屏
竖屏
跟随手机自动旋转
注: 此属性只在声明了x5-video-player-type=”h5”情况下生效
x5videoenterfullscreen进入全屏通知
支持版本: TBS中从>=036900开始支持，QB中是>=7.2开始支持
x5videoenterfullscreen: 表示播放器进入全屏状态
示例：
通过JS监听事件
myVideo.addEventListener("x5videoenterfullscreen", function(){
alert("player enterfullscreen");
})
x5videoexitfullscreen退出全屏通知
x5videoexitfullscreen: 表示播放器退出了全屏状态
使用方法与x5videoenterfullscreen类似
使用同层播放器的一些建议
1. 监听resize 事件实现自适应视口大小变化，视频播放时会调整视口大小
2. 在视频播放期间的交互，弹框，字幕在视频视频区域中，不要在视频区域外
3. 对于直播类全屏视频，最好不要在最顶部放交互性元素
交互性视频实现建议
允许视频区域(video元素)之上的操作
1. 对于需要全屏交互的,可以将video区域设置为视口大小>
视频显示位置控制
默认视频在指定区域的居中显示，可以通过css object-position 属性控制视频(左上角) 显示位置
TBS同层播放参考文档 http://x5.tencent.com/tbs/guide/video.html