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

Posted

技术标签:

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

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

<iframe   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"

【问题讨论】:

【参考方案1】:

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

&lt;iframe allowfullscreen="" frameborder="0" sandbox="" width="490" height="275" src=".../n1.mp4"&gt;&lt;/iframe&gt;

【讨论】:

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

试试看。

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

【讨论】:

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

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

<iframe   src="videos/example.mp4" sandbox></iframe>

【讨论】:

【参考方案4】:

只需替换

<iframe   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  
    src="https://www.youtube.com/embed/aNOgO7aNslo?rel=0">
</iframe>

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

【讨论】:

他写的是“本地文件”。 YouTube 与它有什么关系?【参考方案10】:

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

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

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

要启用自动播放,

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

【讨论】:

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

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

<video   src="hey.mp4"  />

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

【讨论】:

以上是关于如何在 iframe 中禁用本地视频的自动播放的主要内容,如果未能解决你的问题,请参考以下文章

如何在WKWebView中禁用YouTube视频的自动播放?

如何在EasyDSS内调用的iframe地址设置自动播放?

H.265视频流媒体EasyPlayer播放器无法禁用自动播放的问题修复

如何在 wkwebview 视频中禁用自动启动 AVPlayer

如何自动播放静音的 Youtube 视频 (IFrame API)?

将视频以 100% 宽度放入 iframe 并自动播放