React移动端视频无法自动播放问题（iOS17 Safari环境）

问题场景 #

使用React开发时，遇到iOS17系统的Safari浏览器中，移动端视频无法自动播放，仅显示播放按钮。

初始代码 #

<div className="video" ref={videoRef} dangerouslySetInnerHTML={{ 
                    __html: `
                <video 
                loop 
                muted 
                autoplay 
                playsinline 
                muted 
                defaultMuted 
                loop
                >
                 <source src=${video} type="video/mp4" />
                  </video>
        `}}>

尝试方案及报错 #

尝试通过JavaScript手动触发播放，代码如下：

const videoRef = useRef(null)
useEffect(() => {
    if (videoRef.current) {
        const videoElement = videoRef.current.children[0];
        videoElement.play();
    }
})

执行后出现报错：

The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

问题原因与解决方法 #

报错原因：
iOS低电量模式下，Safari浏览器默认关闭视频自动播放功能。

解决方案：
采用「视频未自动播放时显示占位图片，支持自动播放则直接播放；添加全局点击事件触发播放」的方案，同时给video标签添加poster属性。最终代码如下：

const [videoPlayed, setVideoPlayed] = useState(false)
const videoRef = useRef(null)

useEffect(() => {
    if (videoRef.current) {
        const videoElement = videoRef.current.children[0];
        videoElement.play().then(() => {
            setVideoPlayed(true)
        }).catch(err => {})

        const handleClick = () => {
            videoElement.play().then(() => setVideoPlayed(true)).catch(() => {})
            document.removeEventListener("click", handleClick)
        }
        document.addEventListener("click", handleClick)
    }
}, [])

return (
    <>
        {/* 视频未播放时显示占位图 */}
        <div className="image">
            {!videoPlayed && <img src={thumbnail} alt="视频占位图" />}
        </div>
        <div 
            className="video" 
            ref={videoRef} 
            style={{ display: videoPlayed ? "block" : "none" }} 
            dangerouslySetInnerHTML={{
                __html: `
                <video 
                loop 
                muted 
                autoplay 
                playsinline 
                muted 
                defaultMuted 
                loop
                poster="${thumbnail}"  
                >
                 <source src=${video}  type="video/mp4" alt="视频内容" />
                  </video>
        `}}>
        </div>
    </>
)

方案说明：

• 视频未自动播放时，显示指定的占位图片，视频容器隐藏；
• 页面加载时尝试自动播放视频，成功则显示视频容器、隐藏占位图；
• 若自动播放失败，监听全局点击事件，用户点击页面任意位置时触发视频播放，播放成功后移除点击监听；
• 给video标签添加poster属性，作为视频加载前的占位显示。

感谢@DarshShah、@JaromandaX、@MohamdImran提供帮助！

内容的提问来源于stack exchange，提问作者Anay