React项目中实现HTML <video>加载完成后再显示描述文本

核心思路是通过监听视频的加载就绪事件，用状态控制描述文本的渲染时机，确保两者同时显示。具体实现如下：

修改后的代码 #

import { useRef, useState, useEffect } from 'react';

export function ShowVideo() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isVideoReady, setIsVideoReady] = useState(false);

  useEffect(() => {
    const videoElement = videoRef.current;
    if (!videoElement || !videoSourceId) return;

    // 补充你的视频源设置逻辑，例如：
    // videoElement.srcObject = 你的视频流对象;
    // 或者 videoElement.src = `你的视频地址/${videoSourceId}`;

    // 监听视频就绪事件，视频能开始播放时触发
    const onVideoReady = () => setIsVideoReady(true);
    
    videoElement.addEventListener('canplay', onVideoReady);
    
    // 组件卸载时清理事件监听
    return () => {
      videoElement.removeEventListener('canplay', onVideoReady);
    };
  }, [videoSourceId]);

  return (
    <div>
      {videoSourceId && (
        <div className="overflow-hidden">
          <div>
            {/* 仅当视频就绪后才渲染描述文本 */}
            {isVideoReady && <DiscriptionForVideo />}
            <video ref={videoRef} muted />
          </div>
        </div>
      )}
    </div>
  );
}

关键说明 #

• 新增isVideoReady状态变量，初始值为false，用来控制描述文本的显示时机。
• 使用useEffect监听视频元素的canplay事件：该事件在视频加载足够数据、可以开始播放时触发，此时设置isVideoReady为true，描述文本随之渲染。
• 可选事件：如果需要更严格的同步（比如视频第一帧加载完成就显示），可以替换为loadeddata事件，触发时机是视频第一帧已加载完毕。
• 务必清理事件监听，避免组件卸载后出现内存泄漏问题。

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