本文主要和大家分享微信中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="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;
}
注: : 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
效果图：
底部显示：
var offsety = myvideo.clientheight - (myvideo.clientwidth * myvideo.videoheight / myvideo.videowidth)
myvideo.style[object-position]= 0px + offsety + px
效果：
相关推荐：
html5 miranavideo播放器 (代码开源) _html5教程技巧
以上就是h5同层video播放器接入实例分享的详细内容。