如何关闭自动播放答案

【问题标题】：How do I turn off auto play如何关闭自动播放
【发布时间】：2015-10-04 17:03:21
【问题描述】：

我在 iframe 标记中嵌入了一个 .mp4 视频。我不知道如何关闭自动播放。我尝试了一切： autoplay="false", autoplay="0", autoplay='false', autoplay='0' 但似乎没有任何效果。这是我的代码：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item behind" src='videos/cloud_computing.mp4' width='640' height='360' style='width:640px;height:360px;'></iframe>
</div>

在此之前有一个 YouTube 视频（没有自动播放），代码如下所示：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item behind" src='https://www.youtube.com/embed/v1uyQZNg2vE?enablejsapi=1&amp;html5=1&amp;hd=1&amp;wmode=transparent&amp;controls=1&amp;showinfo=0;rel=0;' width='640' height='360' style='width:640px;height:360px;'></iframe>
</div>

【问题讨论】：

iframe 不是媒体播放器标签。仅仅因为你可以将 iframe 指向一个视频文件并不会神奇地将<iframe> 变成<video>...尝试<iframe><video>...</video></iframe>...
其实我之前尝试过使用video标签。问题是视频位于幻灯片之上。使用
好吧，你不能把苹果变成大象。 <iframe> 没有自动播放属性，句号。如果视频隐藏在幻灯片后面，那么您应该摆弄两个元素的 z 索引...
是的，你是对的@MarcB。现在我将视频上传到 YouTube，因为我有最后期限。稍后我将摆弄我的代码。但是感谢您的帮助。

标签： html iframe video mp4 autoplay

【解决方案1】：

我遇到了同样的问题，在朋友的帮助下，我们得到了解决。在此处查看示例

$('.play-btn').on('click', function () {
    // Fetch the video iframe
    var $video = $('.video');

    // Extract the src
    var src = $video.data('src');

    // Add a src attr which should start the video
    $video.attr('src', src);
});

$('.stop-btn').on('click', function () {
    $('.video').removeAttr('src');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe class="video" data-src="https://www.youtube.com/embed/DLzxrzFCyOs" type="mp4">
  </iframe>
<button class="play-btn" type="button">Play Video</button>
<button class="stop-btn" type="button">Stop Video</button>

https://jsfiddle.net/BestByTest/2tfkhj04/

在此示例中，youtube 视频自动播放设置为关闭，某些视频没有此选项，根据我的发现，这是修复。也可以设置为模态，让图片打开视频。一定要设置 iframe 在模态打开后获取 url。这样您就不会在封闭模式中播放视频。

【讨论】：

【解决方案2】：

你需要在它周围加上一个<video> 标签，因为它不知道iframe 是一个视频，因此autoplay 永远不会工作。试试下面的代码。

   <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item behind"> 
           <video src='videos/cloud_computing.mp4'
             width='640' height='360' style='width:640px;height:360px;' autoplay="0">
            </video>
        </iframe>
        </div>

注意

我会使用 autoplay="0" 和 autoplay="1"，因为 chrome 无法识别 autoplay="true" 或 autoplay="false"。

【讨论】：

其实我之前尝试过使用video标签。问题是视频位于幻灯片之上。使用
如果你可以制作一个 jsfiddle，我很乐意研究它。 @maahd

【解决方案3】：

如果没有其他效果，请尝试添加

&autoStart=false

在你的 src 的末尾。如果这不起作用，那么您可能必须使用不同的媒体来嵌入您的视频。相反，也许使用

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

【讨论】：