Back

Technologies:

javascriptjavascript
avatar
Tolerim
25 days ago

How can I ensure that the video continues playing in Chrome on windows when I switch tabs?

In my role as a developer, I am responsible for maintaining a video streaming website for my company that offers the staff convenient access to live streams. However, some users have raised concerns about the streams abruptly stopping when they change tabs. I discovered that Chrome on Windows interrupts the playback to save battery power despite the energy/memory saving preferences. To demonstrate this, I created a simple HTML page which contains the following code snippet: 
<html>
<body>
    <video src="<source of the video stream>" controls autoplay></video>
</body>
</html>
When the video is unmuted and I switch tabs and don't return before one minute, an error message shows up as follows: 
Uncaught (in promise) DOMException: The play() request was interrupted because 
video-only background media was paused to save power.
Although I tried to increase the frequency and calls to our backend, the video continues to stop after only a minute, unlike how it works on YouTube, where the videos continue even when the tab is hidden. After examining how YouTube achieves this, I noticed that their website periodically calls a URL like this: https://rr1---sn-cgpn5oxu-4vge.googlevideo.com/videoplayback?expire=1683149353&ei=yH1SZJ7WO5uZ1sQP9vG92A8&ip=2804:29b8:517b:242:f26b:4dea:b5f2:67e3&id=o-AL8joEvI3HBPbklhxiLbEGTDlJLbVIwopjFjnI8EBWL-&itag=397&aitags=133,134,135,136,160,242,243,244,247,278,298,299,302,303,394,395,396,397,398,399&source=youtube&requiressl=yes&mh=WP&mm=31,29&mn=sn-cgpn5oxu-4vge,sn-bg07dnrd&ms=au,rdu&mv=m&mvi=1&pl=48&gcr=br&initcwndbps=1168750&spc=qEK7B7KNEwbBCyLfMnbqJXwT66vLSzP7Ms6zWibaE_f8dM91zGy5o&vprv=1&mime=video/mp4&ns=55HuNDVyUV7osCrE3I51qpQN&gir=yes&clen=487564749&dur=22246.495&lmt=1682304313621272&mt=1683127276&fvip=1&keepalive=yes&fexp=24007246&c=WEB&txp=5537434&n=x1PQMe-oM9FwmA&sparams=expire,ei,ip,id,aitags,source,requiressl,gcr,spc,vprv,mime,ns,gir,clen,dur,lmt&sig=AOq0QJ8wRgIh
Answers(2)
avatar
Vogi
24 days ago
Verified Answer
I understand your concern. You can try disabling the "pause-background-tabs" flag in Chrome. Here's how you can do it: 1. Open Chrome and type "chrome://flags" in the address bar. 2. Search for "pause-background-tabs" and select "Disabled" from the drop-down menu. 3. Restart Chrome. This should prevent Chrome from pausing video playback when switching tabs. I hope this helps! Let me know if you have any other questions.

Sources

youtube stops playing when switching chrome tab - Super UserHow to Enable a Play/Pause Button on Chrome’s ToolbarControl your music, videos & more - Google Chrome HelpVideos are pausing when I use Chrome - Google Chrome Community
avatar
Tolerim
25 days ago
The reason YouTube's videos do not stop while other videos do is because they use a different video player than the default HTML5 player that most other websites use. YouTube uses a JavaScript library called "YouTube Player API" that handles video playback and playback quality. This library provides features such as buffering and playback of videos even if the tab is hidden or closed. To replicate this behavior on your own site, you can either use a third-party video player library that provides similar features or you can use the YouTube Player API in your own application. The YouTube Player API is not limited to playing only YouTube videos and can be used to play videos from other sources as well. To use the YouTube Player API, you need to include the YouTube IFrame Player API JavaScript code in your HTML file like so: 
<script src="https://www.youtube.com/iframe_api"></script>
Then, you can create a player instance using the API like so: 
let player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PAUSED) {
    event.target.playVideo(); // auto-play when paused
  }
}
This code defines a function called onYouTubeIframeAPIReady() that creates a new player instance using the YT.Player constructor. This constructor takes in an options object that specifies the player's height, width, video ID, and event listeners. In this example, the onReady event listener starts playing the video, and the onStateChange event listener starts playing the video again if it is paused. To use this player instance in your HTML file, you need to create a div element with an ID attribute that matches the playerId option in the options object. For example: 
<div id="player"></div>
Finally, to load and play the video, you need to call the loadVideoById() and playVideo() methods on the player instance, like so: 
player.loadVideoById('VIDEO_ID_HERE');
player.playVideo();
Replace VIDEO_ID_HERE with the actual ID of the video you want to play.
;