Остановить / приостановить видео, когда модал закрыт (без знака $) - PullRequest
Новая
       10

Остановить / приостановить видео, когда модал закрыт (без знака $)

0 голосов
/ 22 апреля 2019

Я выполнил пошаговое руководство на YouTube по созданию простого модального всплывающего окна, затем заменил код формы на встраивание iFrame на YouTube. Парень использовал Atom.io, так что я использовал это, и все работает, кроме звука, продолжающего играть.

Я очень новый и изучаю термины на ходу. В коде js руководство начинало строки со слова «документ», но в StackOverflow люди используют знак $, а затем прямо в функцию (). На этот вопрос отвечали несколько раз, однако я не знаю, как включить этот код в то, что у меня есть. Я понимаю, что воспроизведение видео просто приостанавливается.

Например, Остановить видео, когда модальное окно закрыто выглядит именно так, как мне нужно, за исключением того, что я не могу думать, как слить его с моим файлом. Я мог бы использовать их код прямо, но есть вар и элементы, которые не были объяснены в видео.

Я попытался добавить 

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 просто как-то изменил цель.

Ответы [ 3 ]

0 голосов
/ 23 апреля 2019

Вы пытались использовать 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>
0 голосов
/ 25 апреля 2019

Я взял команду innerHTML из @Adis, чтобы удалить видео, а затем снова использовал ее, чтобы вернуть ссылку, чтобы ее можно было щелкнуть во второй раз. Я создал еще один класс для ссылки 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>';

});
0 голосов
/ 22 апреля 2019

Я бы рекомендовал сделать что-то вроде этого:

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

Затем вы можете вызывать эти функции из своих модальных функций закрытия / открытия.

...