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

编程问答 2022-05-14

问题描述

我刚刚使用 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/ 非常感谢。

解决方法

所以最后的解决方案是像这样通过 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

autoplayautoplayjavascriptreactjsreactjsreactjsreactjsvideovideo