I'm trying to build a custom video player with HTML/JS. I've already made two buttons that will load the previous/next track by using <button> tag. However, I want the system to recognize that there are previous/next tracks available as well.
That is, when I'm playing music from Spotify or videos from YouTube, my Chrome browser shows things like this with prev/next button enabled.
Or something like this appears on my Mac's status bar, again with prev/next button enabled.
However, when I load videos with my HTML these buttons are greyed out and disabled.
I've tried adding multiple sources inside a <video> tag, and making a playlist with <ul>/<li> tags with no luck. I'm not even sure if that's related to my problem. Is it even true that I need to build a playlist to accomplish what I want? I want to know in what condition the system recognizes that there are previous/next track available.
You can use the Media Session API to control previous/next track buttons, more specifically the "previoustrack" and "nexttrack" action handlers:
The Media Session API provides a way to customize media notifications. It does this by providing metadata for display by the user agent for the media your web app is playing.
It also provides action handlers that the browser can use to access platform media keys such as hardware keys found on keyboards, headsets, remote controls, and software keys found in notification areas and on lock screens of mobile devices. So you can seamlessly control web-provided media via your device, even when not looking at the web page.
