Chrome 媒体中心 API答案

【问题标题】：Chrome media hub APIChrome 媒体中心 API
【发布时间】：2020-05-07 09:18:03
【问题描述】：

上周 Chrome 发布了媒体中心。这是浏览器顶部栏右侧的一个小按钮，用于访问所有视频和音频播放。

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

使用<video> 元素可以让您的播放器出现在这个媒体中心中，它可以正常工作。

但对于 youtube 视频（见上文），媒体中心似乎能够找到封面图片、颜色和标题/副标题。但是，我找不到任何有关如何使用标准视频元素获得此方面的文档。有什么想法吗？

【问题讨论】：

标签： html google-chrome html5-video media-player

【解决方案1】：

我们都在同一条船上，在尝试挖掘 chromium 的源代码但没有成功后，我向 chromium 开发人员发送了一封电子邮件，询问了这个问题，并获得了关于 MediaSession 的有用链接。

所以按照文档，您可以通过在mediaSession 中设置metadata 属性来自定义它，以显示除背景颜色之外的标题、描述和艺术品（也称为背景图像），这是因为背景颜色由像素决定自动生成图像。

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' },
    ]
  });
}

我在 JSFiddle 上创建了 demo。结果如下所示。

【讨论】：