React项目中Canvas可加载图片但无法加载视频问题求助

你的代码里视频无法加载主要有两个核心问题：

• 视频元素错误使用了图片的onload事件，视频不会触发这个回调，导致后续的播放和绘制逻辑根本没执行。
• 浏览器的自动播放策略限制，未静音的视频无法自动播放，导致视频没有画面输出到Canvas。

修复步骤 #

1. 替换视频的加载事件：把mediaElement.onload换成视频专用的loadedmetadata或canplay事件，确保视频元数据加载完成后再执行绘制逻辑。
2. 添加静音属性：给视频元素设置muted: true，绕过浏览器的自动播放限制。
3. 清理资源与事件监听：在useEffect的清理函数中，移除视频的事件监听、停止播放并释放ObjectURL，避免内存泄漏。

修改后的完整代码 #

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

const FileUpload = () => {
  const [uploadedFile, setUploadedFile] = useState(null);
  const fileInputRef = useRef(null);
  const canvasRef = useRef(null);
  const mediaElementRef = useRef(null);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setUploadedFile(file);
  };    

  useEffect(() => {
    if (!uploadedFile) return;

    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    const isVideo = uploadedFile.type.startsWith('video/');
    
    const mediaElement = document.createElement(isVideo ? 'video' : 'img');
    mediaElementRef.current = mediaElement;
    
    mediaElement.src = URL.createObjectURL(uploadedFile);

    const loadEvent = isVideo ? 'loadedmetadata' : 'load';
    mediaElement.addEventListener(loadEvent, () => {
      context.clearRect(0, 0, canvas.width, canvas.height);

      if (isVideo) {
        mediaElement.muted = true;
        
        const drawFrame = () => {
          context.drawImage(mediaElement, 0, 0, canvas.width, canvas.height);
        };
        mediaElement.addEventListener('timeupdate', drawFrame);

        mediaElement.play().catch((error) => {
          console.error('视频播放失败:', error);
        });

        mediaElement._drawFrame = drawFrame;
      } else {
        context.drawImage(mediaElement, 0, 0, canvas.width, canvas.height);
      }
    });

    return () => {
      if (mediaElementRef.current) {
        const elem = mediaElementRef.current;
        if (isVideo) {
          elem.pause();
          elem.removeEventListener('timeupdate', elem._drawFrame);
        }
        URL.revokeObjectURL(elem.src);
        mediaElementRef.current = null;
      }
    };
  }, [uploadedFile]);

  return (
    <div className="App">
      <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*,video/*" />
      <canvas ref={canvasRef} width={460} height={300} style={{ marginTop: '20px' }} />
    </div>
  );
};

export default FileUpload;

关键修改说明 #

• 事件替换：视频使用loadedmetadata事件，确保视频的宽高、时长等元数据加载完成后再开始处理，这是视频加载完成的正确触发时机。
• 静音设置：mediaElement.muted = true是绕开浏览器自动播放限制的必要操作，大部分现代浏览器不允许未静音的视频自动播放。
• 资源清理：在useEffect的返回函数中，停止视频播放、移除timeupdate监听、释放URL.createObjectURL创建的临时URL，避免内存泄漏和资源浪费。

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