FireFox浏览器中video标签loop属性失效问题求助（React项目）

下面针对你遇到的Chrome正常、Firefox失效的视频循环问题，提供几个可行的解决办法：

方案一：手动监听ended事件触发循环 #

Firefox对原生loop属性的处理存在兼容性偏差，可通过监听视频结束事件，手动重置播放位置并触发播放：

import { useRef, useEffect } from 'react';

function VideoPlayer() {
  const vidRef = useRef(null);

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

    const handleVideoEnd = () => {
      video.currentTime = 0;
      // 捕获可能的播放错误（比如浏览器自动播放策略限制）
      video.play().catch(err => console.error('循环播放失败:', err));
    };

    video.addEventListener('ended', handleVideoEnd);
    // 组件卸载时移除监听
    return () => video.removeEventListener('ended', handleVideoEnd);
  }, []);

  return (
    <video 
      ref={vidRef} 
      controls={false} 
      autoPlay={true} 
      muted 
      onContextMenu={(e) => e.preventDefault()}
    >
      <source src="./img/video.mp4" type="video/mp4" />
    </video>
  );
}

方案二：优化视频编码兼容性 #

Firefox对MP4的编码格式要求更严格，仅支持H.264 Baseline/Main/High Profile。如果你的视频编码不符合要求，可能导致循环失效。可以用FFmpeg重新编码视频：

ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k output.mp4

方案三：添加preload="auto"属性 #

给video标签添加预加载属性，确保浏览器提前加载完整视频资源，避免循环时因资源未就绪导致无法播放：

<video 
  ref={vidRef} 
  controls={false} 
  autoPlay={true} 
  muted 
  preload="auto"
  onContextMenu={(e) => e.preventDefault()}
>
  <source src="./img/video.mp4" type="video/mp4" />
</video>

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