Video paused on inactive tab

Question

I have implemented hacktimer HackTimer project and i got nice game working even in inactive tab (background). I have part with video and video also works fine - after activate tab in chrome they speed up for secound to get perfect currentDuration. Now same code not working any more. Video go to pause regime in the moment of inactivity. When i go back to tab video start to play.

I have no idea what can be.

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

My html tag looks like:

  <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>

I just wanna permament playing like youtube did.

Answer 1

Only solution for last version was : Visibility api . hackTimer works fine all the time but inactivating tab makes pause() call. I just put on visibilityChange event code line video.play() .

Code:

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);

}

For my app if video is visible then play but other people can add also this line :

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