动态获取视频中多个时间点的图片，react 18 实现

React 18 并没有提供特定的 API 来实现动态获取视频中多个时间点的图片，但是我们可以通过使用 HTML5 的 Video 元素和 Canvas 元素来实现。

首先，我们需要在 React 中创建一个 Video 组件，然后在组件中添加一个 Canvas 元素，用于绘制视频帧中的图片。然后，我们可以使用 Video 元素的 currentTime 属性来获取视频的当前时间点，从而动态获取视频中的多个时间点的图片。

具体实现步骤如下：

1. 在 React 中创建一个 Video 组件，如下所示：

import React, { useRef } from 'react';

function Video(props) {
  const videoRef = useRef(null);

  return (
    <div>
      <video ref={videoRef} src={props.src} controls width="400" height="300" />
      <canvas id="canvas" width="400" height="300" />
    </div>
  );
}

export default Video;

2. 在 Video 组件中添加一个 Canvas 元素。

<canvas id="canvas" width="400" height="300" />

3. 在组件渲染完成后，使用 Video 元素的 onloadeddata 事件监听视频加载完成后的事件。

const videoRef = useRef(null);

useEffect(() => {
  videoRef.current.addEventListener('loadeddata', handleLoadedData);
}, []);

function handleLoadedData() {
  // 视频加载完成后的处理逻辑
}

4. 在 handleLoadedData 函数中，使用 setInterval 定时器来动态获取视频中的多个时间点的图片。

function handleLoadedData() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  setInterval(() => {
    const time = videoRef.current.currentTime;
    ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
    // 处理获取的图片
  }, 1000);
}

5. 在 setInterval 中，使用 Video 元素的 currentTime 属性来获取视频的当前时间点，然后使用 Canvas 元素的 drawImage 方法将视频帧中的图片绘制到 Canvas 上。

6. 处理获取的图片，可以将 Canvas 元素转换为图片格式，或者直接使用 Canvas 元素来显示图片。

完整代码：

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

function Video(props) {
  const videoRef = useRef(null);

  useEffect(() => {
    videoRef.current.addEventListener('loadeddata', handleLoadedData);
  }, []);

  function handleLoadedData() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    setInterval(() => {
      const time = videoRef.current.currentTime;
      ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
      // 处理获取的图片
    }, 1000);
  }

  return (
    <div>
      <video ref={videoRef} src={props.src} controls width="400" height="300" />
      <canvas id="canvas" width="400" height="300" />
    </div>
  );
}

export default Video;

注意：使用 Canvas 元素获取视频帧的图片可能会有性能问题，特别是在处理大尺寸视频时。因此，建议使用服务器端的视频处理工具来获取视频中的图片。