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 中工作正常。有什么我想念的吗？

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>

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

HTML5 专注于 chrome 中的其他选项卡时未触发视频时间更新事件

HTML5 video timeupdate event not triggering while focused on other tab in chrome

javascript

html5-video

reactjs