关闭模式时停止视频？

Question

我的模态视频出现问题，当我关闭模态时，视频仍在后台播放，我没有任何线索。

有人可以帮我在我关闭模式时停止播放视频吗？

我的 js

<script>
    function PopUp(hideOrshow) {
        if (hideOrshow == 'hide') document.getElementById('popup-wrapper').style.display = "none";
        else document.getElementById('popup-wrapper').removeAttribute('style');
    }
    window.onload = function () {
        setTimeout(function () {
            PopUp('show');
        }, 100);
    }
    </script>   

这是视频部分

<div id="popup-wrapper" style='display:none'>
    <div id="popup">
    <a href="#modal-close" class="modal-close" onClick="PopUp('hide')">X CLOSE</a>   
    <h1>HOW IT WORKS?</h1>   

   <div class="form-group">
      <video width="100%" controls>
        <source src="vdo.ogg" type="video/ogg" />
        <source src="vdo.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>

    </div>
</div>

谢谢

Answer 1

当您关闭模式时，选择 video 元素并在其上调用 pause()。

function PopUp(hideOrshow) {
  if (hideOrshow == 'hide') {
    document.getElementById('popup-wrapper').style.display = "none";
    document.querySelector('video').pause(); // add this
  }
  else {
    document.getElementById('popup-wrapper').removeAttribute('style');
  }
}

还请注意，鉴于 hideOrShow 只有两种状态，使用布尔值会更有意义。