打开弹出窗口时如何暂停视频

Question

我有一个轮播，在不同的幻灯片上有多个视频。其中一些幻灯片有弹出文本。当您单击该按钮时，您会得到一个带有文本的文本框。我希望视频在弹出窗口被点击并打开时停止播放，并在弹出窗口再次关闭时继续播放。

我是 Javascript 的新手，这可能就是我无法成功 google 如何做到这一点的原因。如果有人能给我指出正确的方向，那就太好了。

HTML:

<div class="carousel-item">

<video controls autoplay class="myvid" id="player2">
<source src="assets/vid/s2.mp4" type="video/mp4">
</video>

<div class="popup" onclick="myFunction();"> Title
<span class="popuptext" id="myPopup1"> <h3> Title </h3> <p> Popup content </p> </span>
</div>

</div>

Javascript:

function myFunction() {
  let popup = document.getElementById("myPopup1");
  popup.classList.toggle("show");
}

我知道我必须使用 video.pause() 但我一直无法弄清楚我可以在哪里以及如何使用它。

Answer 1

试试这个：

function myFunction() {
  let popup = document.getElementById("myPopup1");
  popup.classList.toggle("show");
  let video = document.getElementById("player2");
  video.pause();
}

这是一个demo

Answer 2

当您点击打开弹出窗口时暂停视频。同样，当您关闭播放器时使用 vid.play()

function myFunction() {
  let vid = document.getElementById("player2"); 
  vid.pause();
  let popup = document.getElementById("myPopup1");
  popup.classList.toggle("show");
}

Answer 3

方法一

function myFunction() {
let popup = document.getElementById("myPopup1");
let player2 = document.getElementById('player2');
popup.classList.toggle("show");
popup.className == 'popuptext show' ? player2.pause() :  player2.play();
}

方法二（差别不大）

  function myFunction() {
  let popup = document.getElementById("myPopup1");
  let player2 = document.getElementById('player2');
  popup.classList.toggle("show");
  player2.paused ? player2.play() : player2.pause();
  }

打开弹出窗口时如何暂停视频

How to pause video when opening a popup

html

javascript

video

function

popup