javascript - 使用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();
}

你可以在这里找到完整的例子

请注意，同样的方法也适用于音频标签。

Answer 2

The visibilitychangeevent is fired when the content of a tab has become visible or has been hidden.

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>