移动浏览器上的 Chrome v.66 自动播放答案

【问题标题】：Chrome v.66 Autoplay on Mobile Browser移动浏览器上的 Chrome v.66 自动播放
【发布时间】：2018-05-03 15:48:19
【问题描述】：

我正在尝试创建一个功能，其中显示带有播放图标的图像，当用户单击该图标时，我们将视频加载到弹出窗口的 iframe 中。根据 link ，如果用户使用 allow='autoplay' 属性与网站交互，则应允许 iframe 自动播放。但这在我们的 Chrome 移动浏览器 v.66 上似乎不起作用。由于我们仅在用户单击播放后才加载视频，所以我想这应该是用户交互的合法案例。我错过了什么吗？

【问题讨论】：

标签： html google-chrome video chromium autoplay

【解决方案1】：

似乎 Chrome for Mobile 仍然需要您从用户手势事件本身处理此问题_{（就像 Safari 顺便说一句）}。

您的 iframe 加载时间，您的用户手势批准将过期，您将无法自动播放或以编程方式播放您的 <video> 声音。

一种解决方法，如果您的 iframe 文档在同一个域中，则在用户手势事件内从主文档加载另一个 <video> 元素，将其标记为用户批准（通过调用 MediaElement.play()），并且一旦您的 iframe 已加载，用 iframe 文档中此用户批准的元素替换您的 iframe 元素。

btn.onclick = e => { // we must have an user-gesture event
  const iframe = document.createElement('iframe'); // your iframe
  const frameContent = `<html>
    <body>
      <video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"></video>
    </body>
  </html>`;
  const url = URL.createObjectURL(new Blob([frameContent], {type: "text/html"}));
  // Our user-approved <video>
  const vid = document.createElement('video');
  vid.play().catch(e => null); // mark it as 'user-approved'
  vid.autoplay = true;

  iframe.onload = e => { // once our iframe have loaded
   // swap both elements
   const i_vid =  iframe.contentDocument.querySelector('video');
   i_vid.replaceWith(vid);
   vid.src = i_vid.currentSrc;
  };
  iframe.src = url;
  document.body.append(iframe);
};

StackSnippet 的 ^_over- 受保护的 iframe 不允许我们操作这个内部框架，所以这里是 live jsfiddle。

【讨论】：