javascript - ReactJS 中的自动播放视频不适用于 Chrome

Question

我刚刚使用 ReactJS 创建了网站，并注意到主页中的视频无法在 Chrome 中播放。仅当我转到不同页面然后返回主页时它才开始播放。请问有人有什么建议吗？我在某个地方看到他们用 JQuery 修复了它，但我不想将 JQuery 添加到 React 中，除非确实有必要。

我使用了这样的视频

<video src={Video} muted playsInline={true} autoPlay={true} loop disablePictureInPicture></video>

还有这样的

<video playsInline loop disablePictureInPicture autoPlay muted>
    <source src={Video} type="video/mp4" />
</video>

而且“静音”不会出现在 dom 中.. 在行动中可以在这里看到:https://www.chiptuning-brno.cz/ 非常感谢。

Answer 1

所以最终的解决方案是通过 ref 传递“静音”，如下所示:

const videoRef = useRef(null)

  useEffect(() => {
    const { current: videoElement } = videoRef
    videoElement.setAttribute('muted', '')
  }, [])

<video src={Video} ref={videoRef} playsInline autoPlay loop disablePictureInPicture muted />

正如我所见，这是几年前的已知问题，此解决方案来自此处:

https://github.com/facebook/react/issues/10389#issuecomment-605689475