H5同层Video播放器接入实例分享-
示例：
注： 这个属性需要在播放前设定好，播放之后设定无效，下面的’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/qqbrow...
横屏
竖屏
追随手机主动扭转
注: 此属性只在声明了x5-video-player-type=”h5”状况下生效
事件回调
x5videoenterfullscreen进入全屏通知
支撑版本: TBS中从>=036900开端支撑，QB中是>=7.2开端支撑
x5videoenterfullscreen: 表示播放器进入全屏状态
示例：
通过JS监听事件
myVideo.addEventListener("x5videoenterfullscreen", function(){
alert("player enterfullscreen");
})x5videoexitfullscreen退出全屏通知
x5videoexitfullscreen: 表示播放器退出了全屏状态
运用办法与x5videoenterfullscreen相似
运用同层播放器的一些倡议
监听resize 事件实现自顺应视口大小变化，视频播放时会调整视口大小
在视频播放期间的交互，弹框，字幕在视频视频区域中，不要在视频区域外
关于直播类全屏视频，最佳不要在最顶部放交互性元素
交互性视频实现倡议
允许视频区域(video元素)之上的操纵
关于需要全屏交互的,可以将video区域设定为视口大小>
同层播放器支撑版本
TBS微信:
TBS内核>=036849 后开端支撑
UA示例：
Mozilla/5.0 (Linux? Android 4.4.4? OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML,like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN
TBS手Q:
TBS内核>= 036855
Android QQ阅读器：
阅读器版本>=7.1
UA示例：
UserAgent: Mozilla/5.0 (Linux? U? Android 4.4.4? zhcn? OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36
视频显示位置控制
默许视频在指定区域的居中显示，可以通过css object-position 属性控制视频(左上角) 显示位置
示例: http://res.imtt.qq.com/qqbrow...
置顶：
myVideo.style["object-position"]= "0px 0px"
结果图：
底部显示：
var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth) myVideo.style["object-position"]= "0px " + offsetY + "px"
结果：
