动态截取视频某个时间点的图片，react 18 实现

在React 18中，可以使用useRef和useEffect hook来实现动态截取视频某个时间点的图片。具体步骤如下：

1. 首先需要在组件中添加一个video元素并设置它的ref属性，用于后续操作。

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

function VideoThumbnail() {
  const videoRef = useRef(null);

  useEffect(() => {
    // do something with video
  }, []);

  return (
    <div>
      <video ref={videoRef} src="your-video-url" />
    </div>
  );
}

2. 在useEffect中获取video元素，并设置它的currentTime属性为需要截取的时间点。同时监听视频的loadedmetadata事件，确保视频已经加载完成。

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

function VideoThumbnail() {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;

    video.addEventListener("loadedmetadata", () => {
      video.currentTime = 5; // 截取5秒处的图片
      const canvas = document.createElement("canvas");
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      const ctx = canvas.getContext("2d");
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      const thumbnailUrl = canvas.toDataURL("image/png");
      console.log(thumbnailUrl); // 打印截取的图片url
    });
  }, []);

  return (
    <div>
      <video ref={videoRef} src="your-video-url" />
    </div>
  );
}

3. 创建一个canvas元素，并设置它的宽高与视频的宽高相同。使用canvas的drawImage方法将视频的某一时间点的画面绘制到canvas上。最后使用canvas的toDataURL方法将canvas转换为图片url，可以将该url保存或显示在页面上。

以上就是动态截取视频某个时间点的图片的实现方法。需要注意的是，由于视频的加载需要时间，因此在监听loadedmetadata事件时需要确保视频已经加载完成。此外，由于使用了canvas，需要考虑到浏览器兼容性问题。