如何在html中将图像提供给系统音频或视频播放器

Question

当我在 YouTube 上观看 pewdiepie 等视频时，我会调整音频。那时它会显示视频的缩略图，如下所示

它还在 Chrome 的快捷方式播放器中显示图像

但我也想制作一个播放器并提供一个像上面图片一样的缩略图。 我试过这个

<video src="..." poster="./example.png">
</video>
/* 
Who Don't knows about it
link to know more about the poster attribute:- https://www.w3schools.com/tags/att_video_poster.asp#:~:text=The%20poster%20attribute%20specifies%20an,video%20will%20be%20used%20instead.
*/

也试过这个

<video src="...">
<img src="./example.jpg"/>
</video>

但它也没有工作 我几乎到处寻找答案 但它给出了这样的结果： 在系统播放器中（windows）

在快捷播放器中（chrome）

如果我的代码不起作用，那么 YouTube 是如何提供缩略图和副标题的（其中有标题和底部是 PewDiePie）

Answer 1

您正在寻找的是Media Session API。

这是来自 MDN 的示例代码，描述了此 API 的各种方法：

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

这是在 Google Developers Web 上引用的相同 API，它突出了您的用例。 Customize Media Notifications and Handle Playlists