微信中H5同层Video播放器接入教程

<script type="text/javascript"> function showImg(url) { var frameid = 'frameimg' + Math.random(); window.img = '<script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'img\').height+\'px\'; }<' + '/script>'; document.write('rame id="' + frameid + '" frameborder="0" scrolling="no" width="100%" style="margin: 0px; padding: 0px;">rame>'); } </script>

微信中H5同层Video播放器接入教程 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"/>

注： 这个属性需要在播放前设置好，播放之后设置无效，下面的’x5-video-player-fullscreen’也是一样

x5-video-player-fullscreen全屏方式

视频播放时将会进入到全屏模式

如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）

注： 声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现

<video id="test_video" src=http://classic.ebaina.com/skin/ebainew/image/nopic.gif>
需要监听窗口大小变化(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...
横屏
<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>
竖屏
<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>
跟随手机自动旋转
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>
注: 此属性只在声明了x5-video-player-type=”h5”情况下生效
事件回调 x5videoenterfullscreen进入全屏通知
支持版本: TBS中从>=036900开始支持，QB中是>=7.2开始支持
x5videoenterfullscreen: 表示播放器进入全屏状态
示例：
<video id=“myVideo".../>
通过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"
效果图：
<script type="text/javascript">showImg('https://segmentfault.com/img/bV3GBV?w=201&h=358');</script>
底部显示：
var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)

myVideo.style["object-position"]= "0px " + offsetY + "px"
效果：
<script type="text/javascript">showImg('https://segmentfault.com/img/bV3GB7?w=205&h=350');</script>
Q&A
Q：如何安装新版tbs？
A：请使用微信扫描以下二维码，扫描后将会自动进行安装，无需其他操作。
<script type="text/javascript">showImg('https://segmentfault.com/img/bV3GCo?w=170&h=171');</script>
Q: 如果要在QQ浏览器里测试，如何安装新版本QQ浏览器
<script type="text/javascript">showImg('https://segmentfault.com/img/bV3GCq?w=158&h=158');</script>
Q：如何测试效果，确定进入了同层播放器？
A：安装新的tbs版本后，如果要测试效果，请杀掉微信进程，把系统时间往后调一天以上，再进入网页进行视频播放，如果微信的顶bar消失，进入了一个沉浸式的播放器，则是进了同层播放器。
Q：如何查看当前的的tbs版本？
A：在微信聊天窗口输入//gettbs 并发送，查看弹出的Toast上显示的tbsCoreVersion 是否等于36849 ，若是则tbs版本正确。注：这是之后进行测试的基础，这个版本一定要正确
Q：接入了同层播放器，在老版本的tbs是否会出问题？
A：对老版本不会产生影响。
Q：同层播放器在iOS上会生效吗？
A：目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS
Q：同层播放器顶部”<”和“…”按钮可以去掉吗？
A：不能
Q: 在微信TBS里如何区是否支持同层播放器
A: a)在微信等TBS里通过UA判断X5内核版本来区分,当版版本号>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
b)在QQ浏览器Android版本中,当浏览器版本>=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