流媒体网站如何在浏览器上显示视频详细信息

Question

在 chrome 中，扩展旁边有一个选项卡可以查看正在播放的视频。它仅在您在浏览器中播放歌曲或视频时出现。当在 youtube 上开始播放视频时，我可以在该选项卡中看到背景图像和视频标题以及频道名称已经在 Spotify 上，我还可以看到图像、歌曲名称和频道名称艺术家，但是，我仍然没有找到他们这样做的媒介，肯定是 javascript，因为我搜索了提到的两个网站的代码，那里和我的网站上都没有或标记这些标签只有页面标题出现在该标签上。

我在MDN文档中看到了Rich Media的单引号，但他们没有详细说明，他们只是说它提供支持，这不是我想要的，看来这是展示广告，毕竟，在 google 上搜索我发现它是一个 YouTube API，其中包含讨论如何为 YouTube 视频显示字幕的视频和教程，这不是我想要的，我想展示视频此选项卡上的数据，至少将页面标题替换为视频标题。

上图中需要说明什么？

<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>

Answer 1

他们使用 MediaSession API.

来自链接 MDN 文章的代码示例：

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. */ });
}

流媒体网站如何在浏览器上显示视频详细信息

How streaming sites show video details on the browser

html

jquery

video

nav