【video】移动端 video 兼容性问题与解决方案

[zhongxia245]

这里的内容，主要摘取下面这个文章的 video 坑来展示，想看具体内容，看这里

原文 复杂帧动画之移动端video采坑实现

[zhongxia245]

帧动画当前的实现有以下几种方式

1. GIF 动画
   GIF 动画适用于处理色彩简单、动效简单的动画

2. lottie
   Airbnb 开源项目，通过解析 AE 动画为 json 数据，支持跨平台的动画效果解决方案；

3. APNG (Animated Portable Network Graphics)
   基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持，其诞生是为了替代老旧的 GIF 格式，但部分浏览器不支持，需要考虑兼容；
   该方式实现的帧动画，可能体积有点庞大，具体得去试一下

4. HTML video 元素
   移动端兼容性不太好，特别是 android 下，可能被各个系统拦截，然后自己去实现了播放器插件，因此有各种形式的播放器。

[zhongxia245]

下面是在移动端 web 使用 video 过程中的采坑总结：

1. video 在 safari 和桌面端 chrome 中可能无法自动播放
   这里的自动播放，无论是 video 标签的 autoplay 属性还是通过 js 自动调用 video 的 play 方法都是自动播放
   桌面端 chrome 自动播放主要受制于 autoplay policy ，遵循对应的策略则可以自动播放，这主要考量于用户的体验；因为使用muted(静音)属性可以允许自动播放， 我们的动画本来就是没有声音的，所以在 video 标签中加上 muted 属性

2. 隐藏视频控制条
   不设置video 属性 controls ，则默认是不显示控制条，但是在 android 下个别型号不受控制

3. IOS 视频自动全屏播放
   <video muted playsInline webkit-playsinline="true"/>

4. IOS下，不允许自动播放
   可以使用点击页面，则开始播放，或者滚动到某个位置开始播放。 因为 IOS为了避免浪费用户的流量，因此除非用户主动触发，否则不自动播放。

5. 有些安卓浏览器无法自动播放，touch 事件也无法触发播放
   可以用promise 来检测是否可以自动播放，无法自动播放，则在这里可以使用兼容方案。

video.play()
  .then(() => {
    // play success
  })
  .catch( err => {
    // auto play fail
  })

6. 视频播放完毕后，展示推荐视频的问题
   qq 浏览器可以使用 mtt-playsinline="true" 属性，关闭推荐视频

[zhongxia245]

总结

1. 移动端 web 对于 video 自动播放的兼容性是在太差，尤其安卓，一些浏览器对 video 标签进行拦截，并以自己的方式实现，或是悬浮置顶播放，或是两个视屏播放冲突，或是控制条无法隐藏，或是播放默认全屏，如果用其它方式可以实现动画尽量还是用其它方式

2. 对于 video 的自动播放，考虑一些浏览器限制必须通过用户交互才能使用，如果视屏是在第一屏则有点难度，还是需要用户通过点击才能播放，如果不是第一屏则可通过 touch 事件来触发，毕竟用户下拉滚动还是会触发 touch 事件

3. video 的 play 方法返回的 promise 存在华为荣耀8 微信里返回 play 成功，但是却没有播放视频