当出现 div 时，如何防止视频在后台播放？

Question

我正在制作一个自行车模拟器，用户可以在设备上踩踏板，他们的踩踏板可以播放视频。我想添加一个暂停屏幕，在屏幕打开时暂停视频。

现在，我有一个暂停屏幕，当出现 div 时，视频会暂停，但如果用户在暂停屏幕出现后继续踩踏板，视频将再次开始播放背景。

这就是我用来显示暂停屏幕和暂停视频的内容。当用户按下按钮时调用该函数。

function togglePause() {
    var paused = document.getElementById("pauseScreen");
    if (paused.style.display == "none") {
        paused.style.display = "block";
    } else {
        paused.style.display = "none";
    }

    var vid = document.getElementById("video");
    vid.pause();
}

踏板设备像蓝牙键盘一样工作，它会在每次踏板旋转时发送一个按键事件。

 $(document).keypress(function (event) {
        console.log(String.fromCharCode(event.which));

        if ('p'.indexOf(String.fromCharCode(event.which)) !== -1) {
            video.play();

我想做到只要div还在显示，视频就不能播放。谢谢！

Answer 1

而不是直接启动里面的视频

if ('p'.indexOf(String.fromCharCode(event.which)) !== -1)

您可以先检查div的.display 属性是否设置为阻塞，如果是则不播放视频。

if ('p'.indexOf(String.fromCharCode(event.which)) !== -1) {
  if (document.getElementById("pauseScreen").style.display != "block") {
    video.play();
  }
}

当出现 div 时，如何防止视频在后台播放？

How to prevent video from playing in background when a div is present?

javascript

html5-video