Как приостановить видео при нажатии на новую вкладку с помощью JavaScript?

Question

Я работаю над видео HTML-тегом. Я хочу приостановить звук при открытии новой вкладки. Просьба помочь исправить эту проблему.

<video autoplay onplay="clickplayer()" id="player" onended="endplayer()" fullscreen="true" controls onvolumechange="myFunction()"  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">dik</video>

Answer 1

Для этого вам нужно сначала обнаружить событие расфокусировки окна. Вот пример:

HTML:

 <video id="video" width="400" controls>
   <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
 </video>

JS:

document.addEventListener("visibilitychange", onchange);
function onchange (evt) {
   document.getElementById("video").pause();
}

Вы можете найти полный пример здесь

Обратите внимание, что тот же метод применяется и к тэгам Audio.

Answer 2

visibilitychangeСобытие наступает, когда содержимое вкладки стало видимым или было скрыто.

Вы должны обнаружить видимость вкладки наvisibilitychangeсобытие и пауза видео, если вкладка скрыта.

var focused = true;
document.addEventListener("visibilitychange", function () {
  focused = !focused;
  if (!focused)
    document.getElementById("video").pause();
});

<video id="video" width="400" controls>
   <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>