진행한 프로젝트 중 광고 영상이 재생되고 영상이 끝나면 링크 이동하는 페이지가 있었다.
여기서 더 발전해 광고 영상 재생 중 해당 광고 관련 회사 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>
);
}
'Javascript' 카테고리의 다른 글
file-saver 적용 (0) | 2024.09.10 |
---|---|
fill() 메서드 (0) | 2024.09.09 |
특정 문자 포함 여부 정규식 (0) | 2024.09.09 |
알파벳 배열 만들기 (0) | 2024.09.06 |
하단 이동 버튼 (0) | 2024.09.06 |