Riff / Built on the open web / Media

HTMLMediaElement

One audio and one video element for the whole page, which every control drives.

Now Playing on a phone: the cover, the title and artist, a seek bar, and the play controls
Everything on this screen reads from or writes to the one audio element.

How Riff uses it

The template prints one <audio> and one <video> for the page, and the script picks which one a track plays through. Loading a track sets src and currentTime on that element and calls play(). Switching between Song and Video hands the current time and paused state from one element to the other. The core blocks' own players are paused and hidden underneath.

Why

The whole player is a UI over these two elements. Sharing one pair across the page is what lets a track keep playing while rows, views and Now Playing change around it.

Without it

Each block keeps its native player underneath, so a page where the script never runs still plays.

Where

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

Reference: HTMLMediaElement on MDN.