React.jsで選択したファイルのビデオの再生時間を取得する方法

方法1: File APIを使用する方法

import React, { useRef } from "react";
const VideoDuration = () => {
  const fileInputRef = useRef(null);
  const handleFileChange = () => {
    const file = fileInputRef.current.files[0];
    const video = document.createElement("video");
    video.onloadedmetadata = () => {
      console.log("ビデオの再生時間:", video.duration);
    };
    video.src = URL.createObjectURL(file);
  };
  return (
    <div>
      <input type="file" ref={fileInputRef} onChange={handleFileChange} />
    </div>
  );
};
export default VideoDuration;

方法2: react-dropzoneライブラリを使用する方法

import React from "react";
import { useDropzone } from "react-dropzone";
const VideoDuration = () => {
  const handleDrop = (acceptedFiles) => {
    const file = acceptedFiles[0];
    const video = document.createElement("video");
    video.onloadedmetadata = () => {
      console.log("ビデオの再生時間:", video.duration);
    };
    video.src = URL.createObjectURL(file);
  };
  const { getRootProps, getInputProps } = useDropzone({ onDrop: handleDrop });
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>ファイルをここにドロップするか、クリックして選択してください。</p>
    </div>
  );
};
export default VideoDuration;

これらのコード例では、<input type="file" />要素を使用してファイルを選択する方法と、react-dropzoneライブラリを使用してファイルをドロップする方法の2つを示しています。選択されたファイルはFileオブジェクトとして取得され、<video>要素を作成し、そのdurationプロパティを使用してビデオの再生時間を取得します。

以上がReact.jsで選択したファイルのビデオ再生時間を取得する方法の例です。必要に応じて、コードをカスタマイズして使用してください。