在React Konva中的画布上播放视频

import React, { useRef, useEffect } from 'react';
import { Stage, Layer, Image } from 'react-konva';

function VideoPlayer() {
  const stageRef = useRef(null);
  
  return (
    <Stage width={window.innerWidth} height={window.innerHeight} ref={stageRef}>
      <Layer>
        {/* 其他图形元素 */}
      </Layer>
    </Stage>
  );
}

function VideoPlayer() {
  const stageRef = useRef(null);
  const videoRef = useRef(null);
  
  useEffect(() => {
    const videoElement = videoRef.current;
    
    videoElement.addEventListener('loadedmetadata', () => {
      const layer = stageRef.current.getLayer();
      const video = new Konva.Image({
        image: videoElement,
        x: 0,
        y: 0,
        width: videoElement.videoWidth,
        height: videoElement.videoHeight,
      });
      
      layer.add(video);
      layer.batchDraw();
    });
    
    return () => {
      videoElement.removeEventListener('loadedmetadata', () => {});
    };
  }, []);
  
  return (
    <Stage width={window.innerWidth} height={window.innerHeight} ref={stageRef}>
      <Layer>
        <video ref={videoRef} src="path/to/video.mp4" />
        {/* 其他图形元素 */}
      </Layer>
    </Stage>
  );
}

function VideoPlayer() {
  // ...

  useEffect(() => {
    // ...
    
    videoElement.play();
    
    // ...
  }, []);
  
  // ...
}