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只有两个状态，使用布尔值会更有意义。

在关闭模式时停止播放视频？

1 个答案: