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

【问题标题】：How to disable auto-play for local video in iframe如何在 iframe 中禁用本地视频的自动播放
【发布时间】：2015-11-04 12:45:35
【问题描述】：

当 src 来自我的本地电脑时，如何禁用视频自动播放？

<iframe width="465" height="315" src="videos/example.mp4"></iframe>

我尝试了以下方法，但它不起作用：

src="videos/example.mp4?autoplay=0"
src="videos/example.mp4?autoplay=false"
src="videos/example.mp4?autostart=0"
src="videos/example.mp4?autostart=false"

【问题讨论】：

标签： html iframe video autoplay

【解决方案1】：

您可以通过这种方式使用视频标签而不自动播放：

<iframe allowfullscreen="" frameborder="0" sandbox="" width="490" height="275" src=".../n1.mp4"></iframe>

【讨论】：

虽然您应该已经解释了“添加沙盒属性”，但这是该问题的正确答案以及 DAYdenisov 之前的答案。所有

【解决方案2】：

试试看。

src="videos/example.mp4?autoplay=1"

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的回答添加解释并说明适用的限制和假设。

【解决方案3】：

如果您仍需要使用 iframe，请添加沙盒

<iframe width="465" height="315" src="videos/example.mp4" sandbox></iframe>

【讨论】：

【解决方案4】：

只需替换

<iframe width="465" height="315" src="videos/example.mp4"></iframe>

通过

<video src="videos/example.mp4" controls></video>

这是一个使用 bootstrap 4 的示例：

 <div class="embed-responsive embed-responsive-4by3">
      <video src="videos/example.mp4" controls></video>
 </div>

【讨论】：

【解决方案5】：

为此替换 iframe：

<video class="video-fluid z-depth-1" loop controls muted>
  <source src="videos/example.mp4" type="video/mp4" />
</video>

【讨论】：

【解决方案6】：

试试这个代码来禁用自动播放视频。

它的工作。如果您已完成此操作，请投票

<div class="embed-responsive embed-responsive-16by9">
    <video controls="true" class="embed-responsive-item">
      <source src="example.mp4" type="video/mp4" />
    </video>
</div>

【讨论】：

【解决方案7】：

我已经尝试了所有可能的解决方案，但对本地视频绑定没有任何效果。如果您仍想使用 iframe，我相信最好的解决方案是使用 jQuery 进行修复。

$(document).ready(function () {
    var ownVideos = $("iframe");
    $.each(ownVideos, function (i, video) {                
        var frameContent = $(video).contents().find('body').html();
        if (frameContent) {
            $(video).contents().find('body').html(frameContent.replace("autoplay", ""));
        }
    });
});

注意：它会查找文档上的所有 iframe 并循环遍历每个 iframe 内容并替换/删除 autoplay 属性。该解决方案可以在您的项目中的任何地方使用。如果您想针对特定元素执行此操作，请使用 $.each 函数下的代码并将 $(video) 替换为您的 iframe 元素 ID，例如 $("#myIFrameId")。

【讨论】：

【解决方案8】：

加载页面时可以将播放器的来源设置为空字符串，这样就不用切换到video标签了。

var player = document.getElementById("video-player");
player.src = "";

当你想播放视频时，只需改变它的src属性，例如：

function play(source){
   player.src = source;
}

【讨论】：

【解决方案9】：

<iframe width="420" height="315"
    src="https://www.youtube.com/embed/aNOgO7aNslo?rel=0">
</iframe>

您应该将字符 ?rel=0 放在 YouTube 视频唯一链接之后和引号之前。它对我有用

【讨论】：

他写的是“本地文件”。 YouTube 与它有什么关系？

【解决方案10】：

如果您使用的是 HTML5，则使用 Video 标记适合此目的。

您可以通过这种方式使用视频标签而不自动播放：

<video width="320" height="240" controls>
    <source src="videos/example.mp4" type="video/mp4">
</video>

要启用自动播放，

<video width="320" height="240" controls autoplay>
    <source src="videos/example.mp4" type="video/mp4">
</video>

【讨论】：

对我的答案投反对票的任何解释？
为什么第一部分会起作用？不过我喜欢你的视频标签建议。
谢谢你的有用回答，我怎么能显示视频的第一帧，它现在看起来像中间灰色背景的播放按钮
@Taleb：我使用的是谷歌浏览器，它为我显示了第一帧，播放器控件悬停在视频下方。您使用的是哪个浏览器？检查此链接一次。 w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay
@Taleb，你可以在<video>标签上设置海报框

【解决方案11】：

您如何看待video 标签？如果您不必使用iframe 标签，您可以使用video 标签。

<video width="500" height="345" src="hey.mp4"  />

您不应在video 标签中使用autoplay 属性来禁用自动播放。

【讨论】：