H5 页面视频播放

自动播放

微信

1
2
3
4
5
6
7
8
9
10
<video src="foo.mp4" autoplay />
<script>
  document.addEventListener(
    'WeixinJSBridgeReady',
    () => {
      this.video.play();
    },
    false,
  );
</script>

QQ

  • 设置autoplay
1
<video src="foo.mp4" autoplay />

QQ 浏览器

ios：

  • 设置autoplay
  • 调用 play 函数，对调用时机有要求，最好setTimeout延时调用

Android

  • 设置autoplay

Safari

ios 9 之前（包含 ios9），播放策略就比较简单：

  • 必须是用户触发了交互， 才允许播放。

ios 10+：

对于设置了autoplay的视频，播放策略如下：

  • 对于没有音轨的视频源，允许自动播放
  • 静音模式下，设置autoplay和muted，允许自动播放，但在播放过程中，如果设置了开启了声音，则会视频会被暂停。
  • 自动播放的视频必须要是在用户的可视范围内，否则视频也会被暂停。

对于普通video元素调用play()方法，播放策略如下：

  • 如果没有音轨的视频源，或者设置了静音模式，无需用户交互也可以播放视频，同样的，如果在播放过程中，如果设置了开启了声音，则会视频也会被暂停。
  • 无需 video 元素可见，play()也可播放视频
  • play()会返回一个Promise，如果播放出现问题，会触发reject。

参考资料：

Chrome

Chrome 浏览器（PC）播放策略，符合以下情况允许自动播放：

  • 视频处于静音的状态

  • 跟页面发生交互（例如点击或触摸等交互行为）

  • 在桌面端，根据用户端的媒体参与指数（Media Engagement Index，MEI）评分，包含访问次数，播放次数，上次播放时间，最终得出的分数如果是高频率播放的话，浏览器则允许自动播放

  • 在移动端，用户添加网站到主屏中

  • 对于 iframe 里面的媒体，如果是同域下，可以设置是否允许自动播放：

    1
    2
    3
    4
    5
    <!-- Autoplay is allowed. -->
    <iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">
      <!-- Autoplay and Fullscreen are allowed. -->
      <iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen"></iframe
    ></iframe>

MEI 评分是评估用户参与当前域名站点的媒体指数，主要取决于用户的访问播放次数，但同时对视频源也有要求：

  • 视频长度必须大于7 秒
  • 不能是静音
  • 视频处于激活态
  • 视频 video 必须大于200x140px

打开chrome://media-engagement/可以看到各个域名的媒体参与评分指数：

Screenshot of the chrome://media-engagement page

注：

打开chrome://flags/#autoplay-policy可以设置 Chrome 自动播放的策略，如果要重置分数，选择浏览器的清除浏览数据即可。

最佳实践：

永远不要信任浏览器支持播放视频，play()方法会返回一个 promise，我们可以处理视频不能播放的情况，比如在不能自动播放时，显示播放按钮：

1
2
3
4
5
6
7
8
9
10
11
12
var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise
    .then((_) => {
      // Autoplay started!
    })
    .catch((error) => {
      // Autoplay was prevented.
      // Show a "Play" button so that user can start playback.
    });
}

这里有个小技巧，先让视频静音自动播放，再引导用户点击开启声音。

1
2
3
4
5
6
7
8
<video id="video" muted autoplay />
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function () {
    video.muted = false;
  });
</script>

参考资料：

其他浏览器

安卓设备的浏览器比较杂乱，对自动播放的限制策略不尽相同，研究起来需要花费大量的时间。总结，无论是否支持自动播放，我们都需要处理视频播放异常的情况。

内联播放

在早期的浏览器，video 播放器是在页面顶层的，无法视频上面添加设计元素。现在，各大移动端浏览器逐渐支持了内联播放：

  • ios 4.0 开始支持内联播放，在 video 元素的webkit-playsinline属性就可以了（ios 10+已移除前缀webkit-）。
  • 安卓内置浏览器也逐渐支持设置playsinline内联播放（安卓浏览器碎片化比较严重，存在各种问题）。
  • 需要特别注意的是，微信，QQ 内置浏览器，QQ 浏览器都是用 X5 内核，并有一套自己的 H5 同层播放器接入规范。详情查看 TBS 文档： https://x5.tencent.com/tbs/guide/video.html

一些问题和建议：

  • ios 端的 QQ 浏览器（最新版 9.6.1）对内联播放支持有问题，video 还是处于顶层。
  • 各大浏览器对内联播放的支持程度不一样，建议根据产品的运行环境比例，再单独做 HACK。
  • 对视频进行解码（配合 webassembly）后，再用 canvas 做渲染，解决恶心浏览器视频管制的终极方案，但性能有待商榷，比如https://github.com/qiaozi-tech/WXInlinePlayer

[本文谢绝转载，谢谢]

分类: 技术
粤ICP备2022084378号