我正在尝试创建一个功能，其中显示带有播放图标的图像，当用户点击图标时，我们将视频加载到弹出框中的iframe中。根据此 link ，如果用户使用allow =＆＃39; autoplay＆＃39;与用户进行了互动，则应允许iframe自动播放属性。但在 Chrome移动浏览器v.66 中，这似乎不适用于我们的情况。由于我们仅在用户点击播放后才加载视频，因此我认为这应该是用户互动的合法案例。我有什么东西可以错过吗？
答案 0 :(得分：1)
似乎 Chrome for Mobile 仍然要求您从用户手势事件本身（就像Safari btw）处理此问题。
iframe加载的时间，用户手势审批已过期，您无法自动播放，也无法以编程方式播放<video>声音。
但是，如果你的iframe文档在同一个域，那么是一种方法，就是从用户手势事件中的主文档中加载另一个<video>元素来标记它是用户批准的（通过调用 MediaElement.play（）），并且一旦您的iframe加载，就会在iframe的doc中使用此用户批准的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＆lt; sup> over - 受保护的iframe不允许我们操纵这个内框，所以这里是live jsfiddle。< / p>