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

Question

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

Answer 1

如果您使用的是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>

Answer 2

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

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

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

Answer 3

尝试使用此代码禁用自动播放视频。

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

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

Answer 4

您可以在加载页面时将播放器的源设置为空字符串，这样您就不必切换到video标记。

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

当您想要播放视频时，只需更改其src属性，例如：

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

Answer 5

我已经尝试了所有可能的解决方案，但没有任何东西适用于本地视频绑定。我相信如果你仍然想使用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")。

Answer 6

将iframe替换为：

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

Answer 7

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

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