javascript - HTML5 视频时间更新事件在 chrome 中的其他选项卡上没有触发

Question

我创建了一个带有自定义控件的 html5 视频播放器。

<video id="ppVideo" ref={this.setVideoRef} webkit-playsinline>
     <source src="some url here" type="video/mp4" />
            Your browser does not support the video tag.
</video>

我在上面添加了一个timeupdate事件监听器。

document.getElementById("ppVideo").addEventListener('timeupdate', function(){
 conole.log('it is trigerring now');
});

当特定选项卡处于活动状态时，它工作正常。如果我移动到其他选项卡，视频停止播放并且timeupdate事件停止触发。在 Firefox 中同样的事情在标签更改上工作正常。

我检查了其他网站上的其他 html 视频。它在切换选项卡上的 chrome 中运行良好。我有什么遗漏吗？

标签： javascriptreactjshtml5-video

Answer 1

其他视频可能有声音。

Chrome 会自动暂停任何不再出现在屏幕上的静音视频（是的，只需滚动出屏幕即可）。

但是，他们继续播放有声的：

muted.ontimeupdate = e => {
  _muted_log.textContent = muted.currentTime;
}
talking.ontimeupdate = e => {
  _talking_log.textContent = talking.currentTime;
}

talking.volume = 0;

.log{
  position: fixed;
  top: 15px;
  background: rgba(255,255,255,0.7);
}
body{
  height: 9000px;
}

<video autoplay muted id="muted" loop src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm"></video>

<video autoplay id="talking" loop src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm"></video>

<div class="log">
muted: <pre id="_muted_log"></pre>
talking: <pre id="_talking_log"></pre>
</div>

因此，如果您希望即使在隐藏时也能播放，请为其添加音轨，但请注意，您需要在页面上进行用户交互，然后才能自动播放。