视频在非活动标签上暂停答案

【问题标题】：Video paused on inactive tab视频在非活动标签上暂停
【发布时间】：2020-04-09 17:26:20
【问题描述】：

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

我不知道会是什么。

我的操作系统：windows Chrome 版本：版本 80.0.3987.149（官方构建）（64 位）

我的 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 一样永久播放。

【问题讨论】：

那么它到底是什么时候停止工作的呢？
也许 1-2 个月我不确定。 Chrome 自动更新在后台运行。
stackoverflow.com/questions/55484353/… 帮不了我。甚至在我的浏览器上也可以进行查询。

标签： javascript google-chrome video background web-worker

【解决方案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()
}

【讨论】：