模态关闭时停止/暂停视频（不使用 $ 符号）答案

【问题标题】：Stop/Pause video when Modal is closed (not using $ sign)模态关闭时停止/暂停视频（不使用 $ 符号）
【发布时间】：2019-04-22 18:25:15
【问题描述】：

我在 YouTube 上进行了一个简单的表单弹出模式演练，然后用 iFrame YouTube 嵌入替换了表单代码。那家伙正在使用 Atom.io，所以我使用了它，一切正常，除了音频一直在播放。

我是个新手，边走边学。在 js 代码中，指南以“文档”一词开头，但在 StackOverflow 上，人们使用 $ 符号，然后直接使用 function()。这个问题已被多次回答，但我不知道如何将该代码合并到我拥有的代码中。我知道视频播放只是被暂停了。

例如，Stop video when modal is closed 看起来正是我所需要的，只是我想不出如何将它与我的文件合并。我可以直接使用他们的代码，但是视频中没有解释 var 和元素。

我已经尝试添加

document.querySelector(".bg-modal").attr = "src","";

但这只是打破了它。我使用 w3schools 来获取代码方面的帮助。

HTML

<!-- Modal Section -->
<div class="bg-modal">
    <div class="modal-content">
      <div class="close">+</div>
      <iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>
  </div>
</div>

CSS

.bg-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.modal-content {
    width: 860px;
    height: 472px;
    background-color: rgb(192, 255, 255);
    border-radius: 8px;
    text-align: left;
    padding: 0px;
    position: relative;
}

.close {
    position: absolute;
    top: -5px;
    right: 0px;
    font-size: 32px;
    transform: rotate(45deg);
    cursor: pointer;
}

Javascript

document.getElementById("button").addEventListener("click", function() {
    document.querySelector(".bg-modal").style.display = "flex";
});

document.querySelector(".close").addEventListener("click", function() {
    document.querySelector(".bg-modal").style.display = "none";
});

将视频嵌入到空白页面并在模态中显示会更容易吗？随着网站的发展，这将是更多的工作，但至少现在是这样：/。或者如果 js 只是以某种方式将目标更改为空。

【问题讨论】：

document.querySelector(".bg-modal").attr = "src","""; 是错误的语法有两个原因。一，那个逗号不合适，二，你有三个引号，它被解析为一个未终止的字符串。试试document.querySelector('.bg-modal').setAttribute('src', '')
这个还在播放。我注释掉了关闭行，因此这将是单击 X 的唯一命令，并且视频不受影响。

标签： javascript html css iframe bootstrap-modal

【解决方案1】：

我建议做这样的事情：

var video = document.createElement("video"); video.setAttribute("src", "nameOfFile.ogg");

然后你可以这样做：

video.pause(); video.currentTime = 0;

来自w3Schools：

var vid = document.getElementById("myVideo"); 

function playVid() { 
    vid.play(); 
} 

function pauseVid() { 
    vid.pause(); 
}

然后您可以从关闭/打开模式函数内部调用这些函数

【讨论】：

我也试试这个。

【解决方案2】：

您尝试过使用 innerHTML 吗？

例如：

<button type="button" name="button" id="button">Click</button>
<!-- Modal Section -->
<div class="bg-modal">
  <div class="modal-content">
       <div class="close">+</div>
         <div id="video">
           <iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>
         </div>
      </div>
</div>

<script type="text/javascript">
  document.getElementById("button").addEventListener("click", function() {
      document.querySelector(".bg-modal").style.display = "flex";
      document.getElementById("video").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>';
  });

  document.querySelector(".close").addEventListener("click", function() {
      document.getElementById("video").innerHTML = '';
      document.querySelector(".bg-modal").style.display = "none";
  });
</script>

【讨论】：

啊！这几乎就是我想要的！ :D 第一组代码删除关闭按钮并打破缩略图以打开视频。所以我把它放在第二个下面，它就可以了！除了第二次单击缩略图外，关闭按钮消失了。我想我知道原因，这就是我一直在寻找的方向:)。一旦一切顺利，我会回来报告的。
是的！您的代码正在擦除所有容器，而 CSS 跟不上，所以我在视频链接周围创建了一个名为 theVideo 的新 div 类，然后只使用 innerHTML 来弄乱该容器。没有其他任何东西被触及，视频链接基本上被删除，然后被替换。
没有什么？当我将它添加到网站时，用于关闭窗口的 + 字符和视频显示在页面上，而不是在 Modal >_
你能分享你的代码吗？我认为这是在模态 div 内，对吧？
这是我现在使用的。 lang-js document.getElementById("button").addEventListener("click", function() { document.querySelector(".bg-modal").style.display = "flex"; }); document.querySelector(".close").addEventListener("click", function() { document.querySelector(".bg-modal").style.display = "none"; document.querySelector(".theVideo").innerHTML = ""; document.querySelector(".theVideo").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe></div>';});

【解决方案3】：

我从@Adis 获取了innerHTML 命令来删除视频，然后再次使用它来放回链接，以便可以再次点击它。我围绕 iframe 链接创建了另一个类，以便它是唯一被清除的东西。否则，该命令也会清除关闭窗口的按钮：P。

//Video 001
document.getElementById("button").addEventListener("click", function() {
  document.querySelector(".bg-modal").style.display = "flex";
});
document.querySelector(".close").addEventListener("click", function() {
  document.querySelector(".bg-modal").style.display = "none";
  document.querySelector(".theVideo").innerHTML  = "";
    document.querySelector(".theVideo").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe></div>';

});

【讨论】：