×

探讨下关于H5中video&audio和信息层同层问题的处理方法

作者:Terry2019.05.30来源:Web前端之家浏览:14008评论:0

500.jpg

近期在做一个视频播放的项目,踩到太多的坑,迫不及待的想分享出来,做个笔记,也便于大家学习。

先来说说项目的需求:很简单,就是播完一个18S的视频后,弹出登录或者注册等信息;此时就会出现视频和弹出层同层、自动播放,循环播放等问题。如果做过此类项目的童鞋,发现视频层永远都会盖住信息弹出层的,无论你怎么设置z-index的值。今天在这里先讨论下“HTML5中video&audio和信息层同层问题”。

x5-video-player-type 启用H5同层播放器

通过video属性“x5-video-player-type”声明启用同层H5播放器

x5-video-player-type支持的值类型:h5

示例:

<video src="https://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元素)之上的操作

对于需要全屏交互的,可以将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:如何测试效果,确定进入了同层播放器?

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

总结

今天主要是学习“H5中video&audio和信息层同层问题”的知识,热个身吧;视频的坑还有很多,接下来的文章会介绍H5中视频和音频自动or循环播放的一些坑,欢迎大家继续关注我们。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/videoaudio20190530.html

网友评论文明上网理性发言 已有0人参与

发表评论: