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

Question

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

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

您可以使用 media.duration 找出 video/audio 文件的持续时间。

let media = new Audio(videoFile);
media.onloadedmetadata = function(){
  media.duration; // this would give duration of the video/audio file
};

Answer 2

您可以向视频元素添加 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>
  );
};

Learn more 关于 HTML5 视频元素

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

How can I get video duration from raw video file in React?

html5-video

reactjs