安卓浏览器video层级最高问题解决方案

x5-video-player-type 启用h5同层播放器通过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/qqbrowser/js/test_video_orientation_attr.html
横屏
<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类似
使用同层播放器的一些建议1. 监听resize 事件实现自适应视口大小变化,视频播放时会调整视口大小
2. 在视频播放期间的交互,弹框,字幕在视频视频区域中,不要在视频区域外
3. 对于直播类全屏视频,最好不要在最顶部放交互性元素
交互性视频实现建议允许视频区域(video元素)之上的操作
1. 对于需要全屏交互的,可以将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/qqbrowser/js/testx5videoplayertype.html
置顶:
myvideo.style[“object-position”]= “0px 0px”
效果图:
底部显示:
var offsety = myvideo.clientheight – (myvideo.clientwidth * myvideo.videoheight / myvideo.videowidth)
myvideo.style[“object-position”]= “0px ” + offsety + “px”
效果:
q&aq:如何安装新版tbs?
a:请使用微信扫描以下二维码,扫描后将会自动进行安装,无需其他操作。
q: 如果要在qq浏览器里测试,如何安装新版本qq浏览器
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
上一个:网页布局的历史:从文艺复兴时期到虚拟现实
下一个:部分网络公司网站建设报价低到成本价的猫腻
滨海网站建设,滨海做网站,滨海网站设计