神经病啊!——微信同层播放器接(踩)入(坑)总结

20

估计踩过微信视频这个坑的,内心都想说上一句:

“神经病啊!”

而微信也终于出了个《H5同层播放器接入规范》,算是正常点了……好了闲话不说,下边进入正题:


1. <video>标签里的内联播放相关属性

微信在video标签上新增了一些x5的私有属性,分别是:

  1. x5-video-player-type
    启用同层播放。取值固定为'h5'

  2. x5-video-player-fullscreen
    是否全屏。取值为'true''false'

  3. x5-video-orientation
    视频方向。取值分别为'landscape''portrait'或者'landscape|portrait',分别对应横屏、竖屏及自动旋转(这个应该用的少)。

不过有一点需要注意的是,这些都是x5的私有属性,仅适用于Android平台。而跟iOS平台相关的,则是这几个属性:

  1. airplay

  2. x-webkit-airplay

  3. playsinline

  4. webkit-playsinline

其中最后两个是iOS平台下的内联播放属性,都是布尔属性,不需要赋值(存在即是true);前两个是iOS平台下airplay的相关属性(说实话我现在也没搞明白为什么网页需要airplay属性),取值为'allow''deny',通常保险起见用'allow'就可以。

2. CSS的属性选择及取值

微信在同层接入规范中提到了object-position这个属性,用于设置视频出现的位置。实际在尝试的过程中,搭配object-fit属性同时使用的效果会比较好。但这两个属性并不是x5私有属性,而是原生的,所以它们同时适用于Android和iOS两个平台。

object-positionobject-fit这两个元素主要的作用是为“可替换元素”设置位置和大小。这里的“可替换元素”,指的是内容不受CSS显式控制的元素,比如比较典型的就是<img><object><video>和表单元素等。

说回视频播放。微信官方的同层接入规范中推荐的做法,是用js动态计算需要的像素值,然后给object-position属性赋值。而我自己尝试了一圈下来,发现object-position这个属性本身支持百分比取值,通常视频默认的值是'50% 50%',也就是居中;全屏视频一般情况下需要贴底放,所以要把取值改成'0 100%'

另一个属性object-fit,有点类似background-size属性,用来设置视频在容器内的填充方式,平时用只需要取值'contain'(保持宽高比填满容器)就可以了。不过这里需要留意的是,全屏下,由于视频一般都不会正好填满屏幕(宽高比差异以及输出分辨率没算顶部标题栏),会在顶部留下一条空隙。这条空隙通常是默认黑色的,如果需要更改颜色,首先要加上个'display:block;'(因为video默认是inline的),然后直接改background-color就OK~

3. 视频封面

<video>标签里有一个与视频封面相关的属性poster,但是在使用中发现性能存在一些问题,在Android端打开视频时(加载),会有跳动的感觉,但是如果去掉,在视频加载时(preload取值'auto',且未用预加载)则会显示空白页面。目前换用了背景图片的方式,但由于视频全屏播放时顶部会有空隙,所以额外加了个background-position: bottom;以及background-size: contain;(取值和视频保持一致),这样设置好的背景在播放视频时就不会漏边了。

4. 设置视频视口大小

同层接入规范里推荐在resize事件回调里设置视频视口大小,我习惯直接设置<video>标签的widthheight,所以在resize回调里加入:

$('video')
        .attr({
            'width': window.innerWidth + 'px',
            'height': window.innerHeight + 'px'
        });

就可以了。

5. UA特性探测

同层接入规范里给的,判断是否是同层播放器方法:

  1. 在微信等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

  2. 在QQ浏览器Android版本中,当浏览器版本>=7.1时开始支持
    UA示例:User­Agent: Mozilla/5.0 (Linux; U; Android 4.4.4; zh­cn; 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


参考资料:

  1. 微信 · H5同层播放器接入规范

  2. 京东 · 视频H5のVideo标签在微信里的坑和技巧

  3. 关于如何在微信里面让video不全屏播放

  4. H5微信播放全屏问题

  5. HTML5中的视频音频使用详解

  6. 张鑫旭 · 半深入理解CSS3 object-position/object-fit属性

  7. MDN · object-fit

  8. MDN · object-position

  9. MDN · 媒体相关事件

  10. MDN · 可替换元素

  11. Apple Developer · HTMLVideo​Element

  12. Apple Developer · HTMLMedia​Element

  13. Apple Developer · plays​Inline

  14. Apple Developer · Opting Into or Out of AirPlay

你可能感兴趣的

Adolph · 2017年07月10日

非常棒, 点了赞再收藏

+1 回复

苏茂林 · 2018年08月23日

两年前当时做视频全屏播放的时候,满满的全是泪啊

回复

linkstar · 4月18日

这个还是避免不了出现进度和返回按钮吧

回复

0

@linkstar 这个没法避免,除非换方案上canvas搞逐帧

某熊猫桑 作者 · 4月18日
载入中...