HTML5 在播放视频/音频时启用上一个/下一个曲目

Question

我正在尝试使用 HTML/JS 构建一个自定义视频播放器。我已经制作了两个按钮，可以使用

<button>

标签加载上一个/下一个曲目。但是，我希望系统认识到也有上一个/下一个曲目可用。

也就是说，当我播放 Spotify 中的音乐或 YouTube 中的视频时，我的 Chrome 浏览器会在启用上一个/下一个按钮的情况下显示类似的内容。

截图1

或者类似的内容出现在我的 Mac 状态栏上，再次启用上一个/下一个按钮。

截图2

但是，当我使用 HTML 加载视频时，这些按钮会变灰并被禁用。

我尝试在

<video>

标签内添加多个源，并使用

<ul>

/

<li>

标签制作播放列表，但没有成功。我什至不确定这是否与我的问题有关。我真的需要建立一个播放列表来实现我想要的吗？我想知道系统在什么情况下识别出有上一个/下一个曲目可用。

Answer 1

您可以使用 Media Session API 来控制上一个/下一个曲目按钮：

媒体会话 API 提供了一种自定义媒体通知的方法。它通过提供元数据供用户代理显示您的 Web 应用程序正在播放的媒体来实现此目的。

它还提供了浏览器可用于访问平台媒体键的操作处理程序，例如键盘、耳机、遥控器上的硬件键以及通知区域和移动设备锁定屏幕上的软件键。因此，即使不查看网页，您也可以通过设备无缝控制网络提供的媒体。