如何从 React 中的原始视频文件获取视频时长？

Question

我的需要是获取该视频文件的持续时间或时间长度。所以我做了 console.log(videoFile.duration)，但是它的显示undefined&为什么它显示未定义？那么如何在React js 中获取视频时长...

const VideoList = ({ videoFile }) => {

  console.log(videoFile.duration);
  // output ==> undefined

  return (

      <div className="relative">

        <video src={videoFile} className="w-full pb-2 sm:w-32 sm:pb-0 rounded mr-2" />

        <span className="absolute bottom-1 right-3 bg-black/60 text-white rounded px-1.5">0:00</span>

      </div>
  );
}

export default VideoList;

Answer 1

您可以loadedmetadata向视频元素添加事件处理程序。当事件被触发时，媒体和轨道的持续时间和尺寸是已知的。

const MyVideo = ({ src }) => {
  const videoEl = useRef(null);

  const handleLoadedMetadata = () => {
    const video = videoEl.current;
    if (!video) return;
    console.log(`The video is ${video.duration} seconds long.`);
  };

  return (
    <div>
      <video src={src} ref={videoEl} onLoadedMetadata={handleLoadedMetadata} />
    </div>
  );
};

了解有关 HTML5 视频元素的更多信息