Search code examples
htmljqueryvideonav

How streaming sites show video details on the browser

enter image description here

In chrome, there is a tab beside the extensions to see the videos playing. it only appears when you play a song or video in the browser. when starting a video on youtube, I can see in that tab a background image and the title of the video and the name of the channel are already on Spotify, I can also see an image, the title of the song and the name of the artist, however, I still haven't found the medium with which they do this, for sure it is with javascript, because I searched the code of two sites mentioned and there is no or tag there and on my site with these tags only the page title appears on that tab.

I saw in the MDN documentation a single quote from Rich Media, but they do not go into details, they just say that it offers support and it is not what I want, it seems that this is to display ads, after all, searching on google what I discovered about it was a YouTube API to incorporate videos and tutorials talking about how to show subtitles for youtube videos, that's not what i want, i want to show the video data on this tab, at least replace the page title with the video title.

enter image description here

What is needed to show how in the image above?

<video controls>
  <source src="/msun.mp3" type="audio/mp3">
    <track label="English" kind="subtitles" srclang="en" default>

Your browser does not support the audio element.
</video>
Solution

  • They use the MediaSession API.

    Code example from linked MDN article:

    if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Unforgettable',
    artist: 'Nat King Cole',
    album: 'The Ultimate Collection (Remastered)',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });

  navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('stop', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekto', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('skipad', function() { /* Code excerpted. */ });
}