자바스크립트 Video 속성 정리

비디오 플레이어를 만들어보는중에 Video에 관한 속성들을 정리해보았다.

🔍 Video.paused

const video = document.getElementById('video');

    function toggleVideo(){
        if(video.paused){
            video.play();
        } else{
            video.pause();
        }
    }

비디오가 일시정지 됐을때를 나타내는 상태인데, boolean 타입으로써

video.paused 일때는 true를, 그게 아니라면 false를 반환한다.

🔍 Video.addEventListener('pause', () => {})

Video.addEventListener('pause', () => {})

비디오가 일시정지 됐을때 일어날 이벤트를 작성한다.

🔍 Video.addEventListener('play', () => {})

Video.addEventListener('pause', () => {})

비디오가 재생됐을때 일어날 이벤트를 작성한다.

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

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

비디오의 재생시간이 업데이트 될때 일어날 이벤트를 작성한다.

🔍 Video.currentTime

Video.currentTime

currentTime 속성은 비디오의 현재 재생 위치를 반환한다.

🔍 Video.duration

video.duration

duration 속성은 비디오의 전체 재생 길이를 반환한다.