[javascript/jquery] javascript video timeupdate event example / 자바스크립트 비디오 재생시간 변경 이벤트 예제

[javascript/jquery] javascript video timeupdate event example / 자바스크립트 비디오 재생시간 변경 이벤트 예제

 

 

html 에서

 

video 태그를 이용하여

 

영상을 재생하다보면

 

현재 재생되고 있는 시간을 따로 표기하거나 

 

남은시간을 계산하거나 하는 경우가 있습니다.

 

그럴때는

 

영상의 현재 재생 위치를 실시간으로 저장하고 있어야 합니다.

 

video 태그의 timeupdate 이벤트를 이용하여 실시간으로 재생위치정보를 가져올 수 있습니다.

 

 

우선 아래와 같은 video 태그가 있다고 가정하고, 

<video id="video" controls autoplay style="width: 400px;" muted>
    <source src="VIDEO URL" type="video/mp4">
</video>

 

아래나와있는 내용처럼

 

eventListner 를 이용해서 timeupdate 이벤트를 

 

선언해서 사용하시면 됩니다.

 

video.addEventListener('timeupdate', function() {

});

 

위 이벤트는 영상의 위치가 변경될때 무조건 호출되기때문에

 

강제 변경이든, 실시간 재생위치든

 

정보를 가져올 수 있습니다!

 

참고들 하세요!