后台选项卡中的播放器不播放下一个播放列表曲目自动播放政策？

编程问答 2022-05-25

问题描述

我在我正在开发的 React 音乐应用中使用 react-player 模块。

我的应用有一个音乐播放列表。当一首曲目播放完毕后，它会自动转到下一首曲目。

问题是，当浏览器选项卡没有焦点（背景选项卡）时，它不会播放下一首曲目，因为它似乎被浏览器的自动播放策略阻止了（已用 Chrome 和 Firefox 进行了测试）。>

请参阅此处的文档：https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

有人建议我为特定网站打开自动播放功能（对于 Chrome，请转到 chrome://settings/content/sound）；但它也不起作用。无论如何，这不是我的访客的解决方案。

我已经为这个问题苦苦挣扎了好几天了；关于如何实现这一目标的任何想法？

  • 我有多个提供商（Youtube、Soundcloud 等），因此播放器并不总是播放来自同一服务的内容。
  • 我可以使用 Page Visibility API 检测标签的可见性。
  • 在我的控制台中，我可以看到 react-player 的 onready 事件被触发；但播放器“卡住”，直到我再次返回选项卡 - 然后播放。

这是a pastebin of the current code of my player。负责让源码播放的函数是

const resolveTracks = async(track,source,backwards) => {
    ...
}

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

browserbrowserhtml5-videojavascriptreact-playerreactjsreactjsreactjsreactjs