如何在 iframe 中禁用自动播放视频答案

【问题标题】：how to disable autoplay video in iframe如何在 iframe 中禁用自动播放视频
【发布时间】：2018-08-21 18:06:52
【问题描述】：

我已经尝试了以下代码：

<iframe controls="0" autoplay="0" class="embed-responsive-item" src="videos/first_video.mp4"></iframe>

我尝试了很多方法，但没有得到任何解决方案。我想禁用视频的自动播放，不想使用<video> 标签，所以没有<video> 标签也可以吗？

【问题讨论】：

How to disable auto-play for local video in iframe的可能重复

标签： html iframe

【解决方案1】：

我想这就是你想要的。

function a() {
var iframe = document.getElementById("iframe");
iframe.src = "video.mp4"
}

<iframe src="imagename" height="200" width="300" id="iframe"></iframe>
<button onclick="a()">Play</button>

【讨论】：

【解决方案2】：

根据this article，语法应该是这样的：

<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen"></iframe>

<iframe src="https://cross-origin.com/myvideo.html" allow="fullscreen"></iframe>

<iframe src="https://cross-origin.com/myvideo.html" allow=""></iframe>

这是相当新的（至少对我来说），我没有看到关于如何关闭自动播放的明确说明。尝试第二个或第三个示例。这是名为 iframe 委托 的新功能政策的一部分，该政策将于 2018 年 4 月全面生效。如果我找到更具体的信息，我会添加到这个答案中。

【讨论】：

【解决方案3】：

iframe 默认不支持此功能。为什么你不想使用视频标签？我能想到的让它看起来像没有自动播放的 iframe 的唯一方法是借助 javascript。

首先将 iframe src 设置为空或不使用 src。将图片设置为 iframe 背景，使其看起来像视频。

<iframe style="background-image:url(picture.png)" id="frame" controls="0" class="embed-responsive-item" src=""></iframe>

然后为该 iframe 创建一个 onclick 事件并更改 iframe src

function loadVideo() {
  var frame = document.getElementById("frame");
  frame.src = "video.mp4";
}

我会考虑使用适用于所有浏览器的视频标签或插件。

【讨论】：