Question

我在YouTube上进行了一个简单的表单弹出窗口Modal的演练，然后将表单代码替换为iFrame YouTube嵌入。那家伙当时使用的是Atom.io，所以我用了，除了音频继续播放之外，其他所有东西都起作用。

我很新，正在学习术语。在js代码中，该指南以单词“ document”开头，但是在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";
});

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

Answer 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(); 
}

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

Answer 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>

Answer 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>';

});

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

3 个答案: