移动端视频在不同浏览器的适配情况

测试浏览器：

• Chrome、Safari；
• 搜狗、360、QQ、猎豹、百度、UC、火狐、微信浏览器；

1. 原生 video 视频 代表产品：暂无

优点:清晰度高 缺点:兼容性极差

• Chrome、Safari 可正常播放

• UC、百度、QQ 等安卓浏览器劫持 video 标签，用其“自己”的播放器来播放视频，视频会位于最上方，文本无法正常显示在视频上

• 微信浏览器 - Ios 版微信无法自动播放（不显示） - 安卓版微信无法自动播放 解决方法：暂无

  2.Gif 代表产品：抖音客户端

优点:可兼容任何浏览器 缺点:清晰度越高，体积越大 （目前两个 GIF 文件体积达到 45MB），首屏加载可能存在白屏 解决方法：兜底添加背景图

3.序列帧模拟图片 代表产品：滴滴客户端

优点：可兼容任何浏览器 缺点：体积太大,请求次数过多，易造成页面卡顿 解决方法：暂无

4.Lottie 代表产品：暂无

优点:清晰度良好 缺点:兼容性一般

• Chrome、Safari 可正常播放

• ios 版 UC、QQ、火狐、微信、搜狗、360、百度可正常播放

• 安卓版 UC 崩溃、微信、QQ、百度、搜狗、猎豹、遨游可正常播放 解决方法：UC 浏览器暂无解决方法

  5.Canva 绘制视频 代表产品：暂无

优点:清晰度较高 优点:兼容性一般

• Chrome、Safari 可正常播放

• UC、百度、QQ 等安卓浏览器劫持 video 标签，用其“自己”的播放器来播放视频,切无法使用 drawImage 方法 解决方法：暂无

  6.平台适配 配置白名单：区分 ios/Android，之后区分不同浏览器

• Chrome、Safari:使用 video 视频

• 安卓浏览器：使用 gif 图 / Lottie

• UC 浏览器：使用 gif 图