React.js中视频无法自动播放的问题排查求助

针对你遇到的问题——已添加autoplay和muted属性，但React中视频仍无法自动播放（纯HTML环境正常），可以从以下几个方向尝试解决：

1. 修正React布尔属性写法 #

React中布尔类型属性（如autoplay、muted、playsinline）无需赋值="true"，直接书写属性名即可。你代码里的playsinline="true"不符合React规范，修改后代码如下：

<video 
  width="518" 
  height="518" 
  loop 
  autoplay 
  preload="auto" 
  playsinline 
  style={{maxWidth: "518px"}} 
  muted
>
  <source src="https://media.tenor.com/f02cT4A-dC4AAAPo/speechless-shocked.mp4" type="video/mp4" />
  <source src="https://media.tenor.com/f02cT4A-dC4AAAPs/speechless-shocked.webm" type="video/webm" />
  Your browser does not support video.
</video>

2. 组件挂载后手动触发播放 #

部分浏览器对自动播放限制严格，即便添加muted也可能需要主动调用播放方法。可以用useEffect钩子在组件挂载后尝试播放：

import { useRef, useEffect } from 'react';

function AutoPlayVideo() {
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(err => {
        console.log("自动播放失败：", err);
      });
    }
  }, []);

  return (
    <video 
      ref={videoRef}
      width="518" 
      height="518" 
      loop 
      preload="auto" 
      playsinline 
      style={{maxWidth: "518px"}} 
      muted
    >
      <source src="https://media.tenor.com/f02cT4A-dC4AAAPo/speechless-shocked.mp4" type="video/mp4" />
      <source src="https://media.tenor.com/f02cT4A-dC4AAAPs/speechless-shocked.webm" type="video/webm" />
      Your browser does not support video.
    </video>
  );
}

3. 监听视频加载状态再播放 #

若视频资源加载缓慢，可能导致自动播放触发时机过早。可以监听canplaythrough事件，在视频加载完成后再播放：

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  const handleCanPlay = () => {
    video.play().catch(err => console.log(err));
  };

  video.addEventListener('canplaythrough', handleCanPlay);
  return () => video.removeEventListener('canplaythrough', handleCanPlay);
}, []);

4. 检查浏览器自动播放策略 #

部分移动浏览器或隐私模式下，需要用户先与页面产生交互（如点击）才能允许自动播放。可以在浏览器控制台查看play()方法抛出的错误，确认具体限制原因。

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