Riff / Built on the open web / Media

Page Visibility

Moves a playing video to audio when the page goes to the background.

Now Playing on a wide screen: the Song and Video switch at the top, the cover on the left, the Up next list on the right, and the player bar along the bottom
Playing in Video and switching apps hands the position to audio; coming back hands it to video again.

How Riff uses it

When the page is hidden while a video is playing, the handler flips the track to the audio element and remembers it did. When the page is visible again it flips back. The same event restarts the per-frame seek follower, and the loops check document.hidden so they stop in the background.

Why

A phone pauses video in the background but keeps audio going, so backgrounding a tab during a video would otherwise stop the music.

Where

Links open the source at the commit this page was published from.

Reference: Page Visibility on MDN.