React 中的视频元素不显示视频

Question

我制作了一个使用该标签的反应组件，如下所示：

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' autoPlay  controls >
            <source src={videoUrl} type="video/mp4" />
            Your browser does not support the video tag.
        </video>
        </div>
    );
};

export default Player;

但是视频播放器仅显示黑屏，并且控件呈灰色。这就是 Chrome 开发者工具的样子：

<video width="640" height="360" name="media" autoplay="" controls="">
    <source src="http://localhost:5000/video/65db62c76e10b724a8c42db2" type="video/mp4">
    Your browser does not support the video tag.
</video>

我已经尝试过我见过的所有解决方案： *添加静音属性 *添加/删除自动播放 *禁用严格模式 我尝试从另一个选项卡中的视频元素打开 src 链接，并且视频播放正常，所以我认为这是一些奇怪的反应

Answer 1

我发现问题了。显然反应没有重新渲染视频元素。我刚刚添加了一个以 videoUrl 作为值的键属性。现在看起来像这样：

<video key={videoUrl} controls autoPlay={true} name='media'>

.