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 传递“muted”：

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

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

Autoplay video in ReactJS don`t work with Chrome

javascript

video

autoplay

reactjs