Chrome media hub API

Question

Last week Chrome released the media hub. This is a small button at the right of the browser's top bar, giving access to all the video and audio playing.

https://blog.google/products/chrome/manage-audio-and-video-in-chrome/

Using the <video> element makes your player appears in this media hub, it just works.

But for youtube videos (see above), the media hub seems to be able to find a cover image, a color and a title / sub-title. However, I was not able to find any documentation about how to obtain this aspect with a standard video element. Any idea?

Answer 1

We're all in the same boat, after trying to dig the source in chromium with no luck, I was sending an email to the chromium developer for this question and got the useful link about MediaSession.

So following the docs, You can customize it by setting metadata property in the mediaSession to showing a title, description and artwork (a.k.a. background image) except the background color, That's because the background color is determined by pixels of the image automatically.

if ('mediaSession' in navigator) {

  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    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' },
    ]
  });
}

I have created the demo on the JSFiddle. the result shows as following.