비디오 addEventListener

진행한 프로젝트 중 광고 영상이 재생되고 영상이 끝나면 링크 이동하는 페이지가 있었다.

여기서 더 발전해 광고 영상 재생 중 해당 광고 관련 회사 qr코드와 영상 재생 중간 쯤 영상을 스킵하는 버튼이 등장하는 것을 추가하기로 해 비디오와 관련된 이벤트를 알아보았다.

 

해당 기능을 위해 필요한 정보

• 전체 영상 길이
• 영상 길이의 중간 지점
• 현재 재생 지점

전체 영상 길이와 중간 지점은 "loadedmetadata”, “duration” 를 활용한다.

loadedmetadata는 미디어의 현재 재생 위치에 있는 프레임이 로드를 완료한 경우에 실행되는 이벤트로 duration 속성을 활용해 전체 영상 길이를 반환한다.

Video.addEventListener('loadedmetadata', () => {
	videoElement.duration
})

 

 

현재 재생 지점은 "timeupdate”, "currentTime” 를 활용한다.

timeupdate는 비디오의 재생 시간이 업데이트 될 때 일어날 이벤트로 currentTime 속성을 활용해 비디오의 현재 재생 위치를 반환한다.

Video.addEventListener('timeupdate', () => {
	videoElement.currentTime
})

 

 

적용 코드

export default function Video() {
  useEffect(() => {
    const videoElement = videoRef.current;
    if (videoElement) {
      videoElement.addEventListener("loadedmetadata", () => {
        setMidpoint(videoElement.duration / 2);
      });

      videoElement.addEventListener("timeupdate", () => {
        setCurrentTime(videoElement.currentTime);
      });
    }

    if (currentTime > midpoint) {
      setShowSkip(true);
    }
  }, [currentTime, midpoint]);

  return (
    <div className="video-area">
      <div className="ad-qrcode-area">
        <div className="w-[65px] h-[65px]">
          <Image
            src={"/qRCode.png"}
            width={60}
            height={60}
            alt="qrcode"
          />
        </div>
      </div>
      <video ref={videoRef} className="object-cover" autoPlay>
        <source src="video.mp4" type="video/mp4" />
      </video>
      <Link
        href={url}
        className={
          showSkip
            ? "skip-area opacity-100 visible"
            : "skip-area opacity-0 transition-all duration-300 invisible"
        }
      >
        <p className="text-xl">건너뛰기</p>
        <div className="skip_icon w-[18px] h-[18px]">
          <Image
            src={"/skip_icon.png"}
            width={22}
            height={22}
            alt="skip_icon"
            className="filter invert"
          />
        </div>
      </Link>
    </div>
  );
}