关于自动播放

autoPlay 布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。

IOS
  • 无音频源的 video 元素 允许自动播放
  • 禁音的 video 元素允许自动播放
  • 如果 video 元素在没有用户手势下有了音频源或者变成非禁音，会暂停播放
  • video 元素屏幕可见才开始播放
  • video元素不可见后停止播放

Android

安卓的 chrome 53 后放宽了自动播放策略，策略不同于IOS的Safari，需要同时对 video 设置 autoplay 和 muted（是否禁音），才允许自动播放； 安卓的 FireFox 和 UC 浏览器支持任何情况下的自动播放； 安卓的其他浏览器暂时不清楚情况；

Safari 浏览器

Safari 10 后带音频的视频和音频默认禁止自动播放，更多信息可以参考这篇文章；

Chrome 浏览器

禁音的视频依旧可以播放，带声音的视频会根据媒体参与指数来决定能否自动播放，那什么是媒体参与指数？官方给了解释和相关的维度：

MEI 是一个评估用户对于当前站点的媒体参与程度的指数，它取决于下面几个维度:

  • 用户在媒体上停留时间超过了
  • 7秒以上音频必须是展示出来，并且没有静音与
  • video 之间有过交互
  • 媒体的尺寸不小于 200x140.

检测能否自动播放？

  1. var promise = document.querySelector('video').play();
  3. if (promise !== undefined) {
  4.     promise.catch(error => {
  5.         // Auto-play was prevented
  6.         // Show a UI element to let the user manually start playback
  7.     }).then(() => {
  8.         // Auto-play started
  9.     });
  10. }

为什么 IOS 下微信和钉钉可以自动播放带声音的视频？

确实发现在微信经常能看到自动播放的H5，但是作者自己写的设置了 autoplay、playsInline 的视频播放样例，在微信上依旧无法自动播放，而在钉钉上却可以自动播放

系统-浏览器带声音不带声音IOS 钉钉支持支持IOS Safari禁止自动播放IOS 微信禁止禁止

通过查询资料，IOS WebAPP 开发都是基于 IOS 提供的浏览器内核进行开发的，所以在 WebAPP 的 webview 中可以修改自动播放的表现，钉钉明显是支持自动播放，微信则是禁止自动播放，但是提供了内置事件来支持自动播放：

微信下通过 WeixinJSBridgeReady 事件进行自动播放：

  1. document.addEventListener(
  2.   'WeixinJSBridgeReady',
  3.   function() {
  4.     video.play();
  5.   },
  6.   false
  7. );

追加内容

微信H5自动播放音频

  1. yinyue('Fireworks')
  2.     function yinyue(d) {
  3.         var b = document.getElementById(d);
  4.         var c = function c() {
  5.             b.play();
  6.             document.removeEventListener("touchstart", c, false);
  7.         };
  8.         b.play();
  9.         document.addEventListener("WeixinJSBridgeReady", function () {
  10.             c();
  11.         }, false);
  12.         document.addEventListener("YixinJSBridgeReady", function () {
  13.             c();
  14.         }, false);
  15.         document.addEventListener("touchstart", c, false);
  16.     }