视频在非活动选项卡上暂停

Question

我已经实现了 hacktimer HackTimer project，即使在不活动的选项卡（背景）中我也能很好地运行游戏。我有部分视频和视频也工作正常 - 在 chrome 中激活选项卡后，它们会加快速度以获得完美的 currentDuration。现在相同的代码不再起作用。视频在不活动时进入暂停状态。当我返回标签时，视频开始播放。

我不知道可以是什么。

My OS: windows Chrome version: Version 80.0.3987.149 (Official Build) (64-bit)

我的 html 标签看起来像：

  <video id="videoID" muted playsinline
         oncanplaythrough="console.log('video ready');">
    <source src="1.ogv" type="video/ogg">
    <source src="1.mp4" type="video/mp4">
    no support
  </video>

我只想像 youtube 那样永久播放。

Answer 1

上一个版本的唯一解决方案是：Visibility api。 hackTimer 一直工作正常，但停用选项卡会调用 pause()。我只是放在 visibilityChange 事件代码行 video.play() .

代码：

var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") {  
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

var videoElement = document.getElementById("videoElement");

function handleVisibilityChange() {
  if (document[hidden] && videoElement.style.display != 'none') {
    videoElement.play();
  }
}

if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
  // Handle page visibility change   
  document.addEventListener(visibilityChange, handleVisibilityChange, false);

}

对于我的应用程序，如果视频可见则播放，但其他人也可以添加此行：

 if (video.paused) {
   video.play()
}

视频在非活动选项卡上暂停

Video paused on inactive tab

javascript

video

background

google-chrome

web-worker