关闭模态窗口后停止播放 iframe 视频答案

【问题标题】：Stop playing iframe video after closing modal window关闭模态窗口后停止播放 iframe 视频
【发布时间】：2020-03-27 08:58:41
【问题描述】：

我需要在关闭模态窗口后停止播放视频。这是我的代码：

<div onclick="document.getElementById('id01').style.display='block'" class="mkdf-elements-holder-item-content mkdf-elements-holder-custom-184744" style="padding: 300px 0 200px 0">


  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header style="background-color:white;" class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.visibility='hidden'"
        class="w3-button w3-display-topright">&times;</span>
        <h2 style="background-color:white; color: white"> V </h2>
      </header>
      <div class="w3-container">
    <iframe id="ifr" src="https://www.youtube.com/embed/ZrXbX8cWrvQ" allowscriptaccess="always"> /iframe>
      </div>
    </div>
  </div>

我试过这段代码，但它不起作用：

<script>
 $("#id01").on('hidden.bs.modal', function (e) {
        $("#id03 iframe").attr("src", $("#id03 iframe").attr("src"));
    });
</script>

有人知道我如何在关闭模式窗口时停止播放视频吗？

【问题讨论】：

试试这个： $('.videoModal').on('hide.bs.modal', function(e) { var $if = $(e.delegateTarget).find('iframe' ); var src = $if.attr("src"); $if.attr("src", '/empty.html'); $if.attr("src", src); });
谢谢，但还是不行。
顺便说一句，我在您的代码中没有看到 id03 是不是 #id01 或 ifr？
我也试过 ifr 和 id01，但还是没有
请稍微解释一下您的代码并描述当前发生的情况。

标签： javascript html css modal-dialog bootstrap-modal

【解决方案1】：

你的 HTML 中不存在的 jQuery 引用和 id 应该如何处理？ @Manjuboyz 指出，#id03 不存在，请改用#ifr 来引用您的 iframe。

<script>
$("#id01").on('hidden.bs.modal', function (e) {
  $("#ifr").attr("src", $("#ifr").attr("src"));
});
</script>

您的方法需要重新加载整个视频。如果您有一个包含 <video></video> 元素的 iframe，您可以将其停止并将其设置为开头：

$('#ifr').contents().find('video').each(function () {
 this.currentTime = 0; // set to beginning
 this.pause(); // set video to paused
});

您需要使用 jQuery 的 contents() 来处理 iframe 的 DOM。

【讨论】：