React中video元素无法加载显示视频的问题求助

针对你遇到的React视频播放器黑屏、控件灰显，但单独访问视频URL能正常播放的问题，核心原因是初始空URL导致source加载失败后，浏览器不会自动重试加载更新后的URL，可以通过以下两种方式解决：

方法1：给Video元素添加Key属性 #

利用React的key特性，当videoUrl变化时强制重新渲染整个video组件，触发浏览器重新加载视频资源：

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

const Player = () => {
    const { videoId } = useParams();
    const [videoUrl, setVideoUrl] = useState('');

    useEffect(() => {
        console.log('videoId: ' + videoId);
        const apiUrl = `http://localhost:5000/video/${videoId}`;
        setVideoUrl(apiUrl);
        console.log('API URL: ' + apiUrl);
    }, [videoId]);

    if (!videoId) {
        return <div>Loading...</div>;
    }

    return (
        <div>
        <video 
          width="640" 
          height="360" 
          name='media' 
          controls
          key={videoUrl} {/* 添加这行 */}
        >
            <source src={videoUrl} type="video/mp4" />
            Your browser does not support the video tag.
        </video>
        </div>
    );
};

export default Player;

方法2：使用Ref手动触发视频加载 #

通过useRef获取video元素实例，在videoUrl更新后手动调用load()方法，强制浏览器重新请求视频资源：

import React, { useState, useEffect, useRef } from 'react';
import { useParams } from 'react-router-dom';

const Player = () => {
    const { videoId } = useParams();
    const [videoUrl, setVideoUrl] = useState('');
    const videoRef = useRef(null); // 创建ref

    useEffect(() => {
        if (!videoId) return;
        const apiUrl = `http://localhost:5000/video/${videoId}`;
        setVideoUrl(apiUrl);
        // URL更新后手动加载
        if (videoRef.current) {
            videoRef.current.load();
        }
    }, [videoId]);

    if (!videoId) {
        return <div>Loading...</div>;
    }

    return (
        <div>
        <video 
          ref={videoRef} // 绑定ref
          width="640" 
          height="360" 
          name='media' 
          controls
        >
            <source src={videoUrl} type="video/mp4" />
            Your browser does not support the video tag.
        </video>
        </div>
    );
};

export default Player;

问题说明 #

初始渲染时videoUrl为空字符串，浏览器尝试加载无效资源后进入错误状态；后续videoUrl更新时，浏览器不会自动重新检测source的src变化。上述两种方法都能强制浏览器重新发起视频请求，解决黑屏和控件灰显的问题。

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