Как предотвратить воспроизведение видео в фоновом режиме при наличии 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();
}

Устройство педалирования работает как клавиатура Bluetooth, где оно отправляет события нажатия клавиш при каждом повороте педали.

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

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

IХотелось бы сделать так, чтобы пока отображался 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();
  }
}