H5直播 寻找最优解(2)

387 阅读3分钟

H5 播放器(video)适配安卓 && IOS方案总结

  • 这篇笔记不完全针对h5直播,但是无论直播还是普通视频,都要用video。所以就放在了这个系列中了

h5 video在安卓和ios中的表现

首先对于h5 video,在移动端的变现来说,安卓和IOS都是不同的,并且在腾讯大佬的X5内核中,表现更是大不一样。没有接触过的人会感觉很意外,并且没有头绪。

  • ios表现:比如在ios微信中,不加任何属性,会使用ios的原生播放器,就像在safari中的那样,上下两个控制栏。
  • 安卓表现:安卓则比较突出,这里说x5内核中的表现,video会被x5内核接管,然后默认同层播放(如果有不准的地方可能是我忘记了),但基本上表现会很感觉很异常。其实这是x5做的同层播放处理,我理解是一种沉浸式体验。可以全屏,全屏还支持横屏,功能齐全,只不过样式。。。其实还可以,不过 如果PM对样式有定制化的要求,定制化的功能,比如滑动屏幕拖拽进度、调节音量、静音、倍速等等功能。那一定是无法接受的, 所以就要我们想办法干掉同层播放。

解决方案

  • ios video中加上这两个属性,解决ios原生播放器问题
      webkit-playsinline
      playsinline
  • 安卓 加上这个属性,video就可以被我们控制了。不要用xxx-type="h5", 这个解决不了同层问题。
      x5-video-player-type="h5-page"

解决方案的解决方案(解决了同层播放又带来了新的问题)

  • 非常神奇的问题是非同层后,video右上角多了一个 全屏按钮,看得见,摸不着。咋办,PM不可能接受,作为一个有追求的前端,我也不能接受。于是有了下面的方案:

video不同展示效果,方案不同

  • object-fit: cover 情况
    height: calc(100% + 30px);
    top: -30px;
  • object-fit: contain
    宽高比 比例小于当前播放器
        position: absolute;
        width: calc(100% + 200px);
        left: 50%;
        transform: translateX(-50%);

    宽高比 比例大于当前播放器
        position: absolute;
        height: calc(100% + 120px);
        top: 50%;
        transform: translateY(-50%);
  • 视频充满播放器,也就是cover的时候,将播放器上移30px,亲测30px 性价比最高,刚刚好把全屏按钮 移除屏幕外, 不过会损失一点视频展示的空间

  • 对于自适应播放器宽高的,针对不同比例采用了两种方案,可以计算视频比例和播放器比例,相比之后采用不同方案,代码copy就能用。

  • 那么这个时候只能舍弃一点用户体验了,如果你有更好的方案,希望可以告诉我。

其他

  • 关于h5 video的其他罕见属性可以看我其他的笔记,有写
  • X5内核官方文档,里面有一些现有问题和相应的解决方案 x5.tencent.com/tbs/technic…