동영상 파일 재생시간 구하기

Lipton·2023년 11월 21일
post-thumbnail

동영상 파일을 재생하기 전에 재생시간을 미리 구하는 방법

 // 업로드 파일 가져오기
  const files = useFileList(); // files의 type은 File[] 형식이다

  const getDurations = async () => {
    // files 배열의 각 파일에 대해 Promise.all로 비동기 처리
    const durations = await Promise.all(
      files.map(
        (file) =>
          new Promise<number>((resolve) => {
            // 파일이 비디오인 경우
            if (file.type.startsWith("video/")) {
              // video 엘리먼트 생성
              const video = document.createElement("video");
              // 파일 URL을 video의 src로 설정
              video.src = URL.createObjectURL(file);
              // 비디오의 metadata를 로드하는 이벤트 리스너
              video.addEventListener("loadedmetadata", () => {
                resolve(Math.floor(video.duration)); // duration을 resolve
                URL.revokeObjectURL(video.src); // URL 해제
              }, { once: true });
            } else {
              // 파일이 비디오가 아닌 경우 0을 resolve
              resolve(0);
            }
          })
      )
    );
    return durations
  };

출력화면

profile
Web Frontend

0개의 댓글