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

发布于 2025-01-16 20:06:44 字数 665 浏览 2 评论 0原文

我的需要是获取此视频文件的持续时间或时间长度。所以我做了 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;

原文

My need is to get the duration OR time length of this video file. So I did console.log(videoFile.duration) but its show undefined & why does it show undefined? So how can I get video duration in 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;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鹿童谣 2025-01-23 20:06:44

您可以将 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 视频元素

You may add a loadedmetadata event handler to the video element. When the event is fired, the duration and dimensions of the media and tracks are known.

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 about HTML5 video element

回复收藏 0 原文

~没有更多了~