如何使用 React.JS 保持粘性激活

Question

我遇到了这样的问题：

1. 用户单击“打开”按钮
2. 视频播放器已打开
3. 由于浏览器限制政策，视频播放器无法自动播放。

我已经记录了

navigator.userActivation.hasBeenActive

，它显示“假”，但在某些视频播放器使用情况下，我得到“真”

我正在使用 React，当用户单击按钮时，我会

event.persist()

，这样它就无法被池化。 也许我做错了什么，还有更多需要考虑的事情？ 我只使用 Chrome 时遇到这种行为，所有其他浏览器都工作良好

Answer 1

Chrome 执行比其他浏览器更严格的自动播放政策。默认情况下，除非发生某些用户交互（例如单击按钮），否则带音频的视频不会自动播放。如果视频开始静音，Chrome 允许自动播放。您可以首先将视频静音，然后允许用户根据需要取消静音。您可以执行以下操作：

• 使用 useState 钩子来管理静音状态（muted）。最初，保留 视频已静音（静音={true}）。
• 单击“打开视频”按钮以静音状态播放视频（video.play()）。
• 添加“取消静音/静音”按钮，用于切换静音状态。