React视频组件插入视频后无法运行，求助排查问题

1. 视频格式与路径核心问题 #

• 格式声明不匹配：你使用的是.mov后缀视频，但type属性写的是video/mp4，浏览器会因格式声明与实际文件不符拒绝加载。解决方案二选一：
  • 将视频转码为MP4格式（推荐H.264编码，兼容性最好）
  • 把type属性改为video/quicktime
• 静态资源路径错误：React项目中静态资源的路径规则分两种：
  • 若视频放在public文件夹下，路径需改为/video/SkillsVideo2.mov（去掉开头的.）
  • 若视频放在src文件夹下，需通过import引入：

    import videoSrc from './video/SkillsVideo2.mov';
    // 后续在source的src属性中使用{videoSrc}
    

2. 自动播放策略适配 #

浏览器自动播放策略要求视频必须静音才能触发自动播放，你已添加muted属性，但仍可能因加载时机问题失效。可在useEffect中手动调用播放并捕获错误：

useEffect(() => {
  videoRef.current?.play().catch(err => console.error('播放失败:', err));
}, []);

3. 播放速率设置时机优化 #

组件挂载时（空依赖useEffect）视频可能未完成加载，此时设置playbackRate不会生效。需监听视频的loadedmetadata事件，确保视频元数据加载完成后再设置速率：

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

  const handleLoaded = () => {
    video.playbackRate = 2;
  };

  video.addEventListener('loadedmetadata', handleLoaded);
  return () => video.removeEventListener('loadedmetadata', handleLoaded);
}, []);

4. 容器样式补全 #

player-wrapper容器若无明确宽高，视频的width="100%" height="100%"会导致显示异常，可给容器添加基础样式：

.player-wrapper {
  width: 800px; /* 或使用百分比适配 */
  height: 450px;
}

完整修复代码示例 #

import React, { useRef, useEffect } from 'react';
import videoSrc from './video/SkillsVideo2.mp4'; // 假设已转码为MP4并放在src目录下

const YourComponent: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement>(null);

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

    const handleLoaded = () => {
      video.playbackRate = 2;
      video.play().catch(err => console.error('播放失败:', err));
    };

    video.addEventListener('loadedmetadata', handleLoaded);
    return () => video.removeEventListener('loadedmetadata', handleLoaded);
  }, []);

  return (
    <div className="player-wrapper" style={{ width: '800px', height: '450px' }}>
      <video
        ref={videoRef}
        controls
        width="100%"
        height="100%"
        loop
        muted
      >
        <source src={videoSrc} type="video/mp4"/>
        你的浏览器不支持HTML5视频播放。
      </video>
    </div>
  );
};

export default YourComponent;

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