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

여기서 더 발전해 광고 영상 재생 중 해당 광고 관련 회사 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>
	  )
  }