h5直播活动的埋坑之旅
前言
最近参与了做空宣的H5中,里面遇到了video
标签在android
和iPhone
手机适配中出现了一些问题,在微信浏览器中使用android
默认的播放组件,会导致video标签的层级是最高的,直播的过程中导致弹幕就不能浮现在上面了(这个是微信浏览器使用的播放内核导致的)。
出现问题的原因
IOS
的微信浏览器是Chrome内核
, Android
的微信浏览器是X5内核
;由于在安卓中的微信浏览器中的层级是最高的,从而导致通过z-index层级高低的方案不能解决同时解决android
和ios
的弹幕展现的问题。
解决方案
在解决这个问题的时候,首先在iPhone
手机端通过层级的高低是可以实现弹幕在video标签上展现,但是针对android
手机却是不行的,对于android
手机当时讨论了三个方案:
- 通过对展现弹幕的
div
框给予绝对定位,同时采用z-index
的最大值进行覆盖(同时保证在同一块级格式上下文中,在android
的微信浏览器中会将video标签层级展现最高) - 通过
canvas
去实现video标签的播放(但是不能转换直播过程中的链接) - 通过TBS(腾讯浏览器服务)中的同层浏览器来实现弹幕展现
接下来我们可以只针对android的微信浏览器来探讨和实现这个三个方案:
通过z-index来实现弹幕的层级覆盖
在这三个方案中,这个方案是最简单和最容易实现的:
HTML文件:
1 |
|
CSS文件:
1 | /* 弹幕样式 */ |
首先要保证video
和弹幕框在同一块级格式化上下文(BFC)上,然后需要弹幕框的z-index
的层级高于video
标签,那么就可以在ios
上可以实现发送弹幕在直播中展现弹幕了,但是在android
中就不能通过该方法去实现弹幕的功能,因为video
在android
中默认的层级是最高的。
通过canvas来实现弹幕的展现
首先这个方案只适用于观看回放和观看视频,不适用于视频直播。由于canvas
中的drawImage
方法不能转换直播过程中的视频流。以下为实现方案:
HTML文件:
1 | <div class = "h5-player"> |
CSS文件:
1 | video{ |
主要的JS部分:
1 | setInterval(function(){ |
该方法依旧需要通过z-index
来实现弹幕覆盖video
。通过canvas来转换目的是为了让video的层级低于弹幕层级
通过TBS中的H5同层播放器的video播放模式来实现弹幕的播放
说到用TBS的H5同层播放器来实现弹幕的播放,大家可能不是很清楚TBS是啥(腾讯浏览服务)
需要了解的话,链接地址: TBS的H5同层播放器接入规范
首先我们需要了解H5同层浏览器中的一些属性:
启用H5同层浏览器(x5-video-player-type)
1
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
注意: 这个属性需要在播放前设置好,播放之后设置无效,下面的x5-video-player-fullscreen也是一样
H5同层浏览器全屏模式(x5-video-player-fullscreen)
视频播放时,进入到全屏模式:
注意: 声明此属性,需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现
1
<video id="h5_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
需要监听窗口大小变化(resize)实现全屏
JS部分:
1
2
3
4window.onresize = function(){
h5_video.style.width = window.innerWidth + "px";
h5_video.style.height = window.innerHeight + "px";
}控制横竖屏 (x5-video-orientation)
声明播放器支持的方向, landscape 横屏, portraint竖屏
1
2
3
4
5<!-- 竖屏 -->
<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>
<!-- 跟随手机自动旋转 -->
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>视频显示位置控制(object-position)
默认视频在指定区域的居中显示,可以通过css object-position 属性控制视频(左上角) 显示位置
进入全屏通知和退出全屏通知(x5videoenterfullscreen和x5videoexitfullscreen)
示例:
1
2<video id=“myVideo".../>
JS部分: 通过
JS
监听事件1
2
3myVideo.addEventListener("x5videoenterfullscreen|x5videoexitfullscreen", function(){
...
})
前面了解到H5同层浏览器中的属性,接下来就可以实现该方案了:
要实现该方案,同样是基于第一个方案的前提下实现的,需要利用z-index的层级来实现弹幕的显示。
HTML部分:
1 | <div id="h5-player"> |
CSS部分同样需要将对弹幕部分进行绝对定位,还要对其进行层级设置(z-index
),让其高于video的层级。
js实现部分:
在android手机中点击观看直播按钮,会开启H5同层浏览器,进入全屏模式,页面会显示video,弹幕会浮现在video上面。
1 | // 观看直播 |
补充
如果你直接使用video标签,会出现播放video时出现自动全屏问题,video内联播放,使用以下元素都可以实现内联播放视频,
可以通过添加playsinline webkit-playsinline以及x5私有的x5-playsinline避免全屏。
ios10以上需加上playsinline属性,ios10以下需加上webkit-playsinline来实现内联播放。
按照上述属性设置之后,大多数情况都可以满足,唯独android的微信。
1 | <video src="video/xxx.mp4" controls playsinline webkit-playsinline x5-playsinline></video> |
本文由 Abert 创作,采用 知识共享署名 4.0 国际许可协议。
本站文章除注明转载/出处外,均为本站原创或翻译,转载请务必署名。