HTML5의 도입으로 비디오 재생은 웹에서 더욱 일반적인 기능이 되었습니다. 비디오를 재생하는 동안에는 사용자에게 재생 이벤트 및 상태를 추적하여 추가적인 조작이나 알림을 제공할 수 있습니다. 이번 기술 블로그에서는 자바스크립트를 사용하여 HTML5 비디오의 이벤트와 상태를 추적하는 방법을 알아보겠습니다.

이벤트 추적하기

HTML5 비디오 요소는 video 태그로 만들어집니다. 비디오 이벤트를 추적하기 위해 video 요소에 이벤트 리스너를 추가할 수 있습니다.

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

// 비디오 재생 시 이벤트 처리
video.addEventListener('play', () => {
  console.log('비디오가 재생되었습니다.');
});

// 비디오 멈춤 시 이벤트 처리
video.addEventListener('pause', () => {
  console.log('비디오가 멈췄습니다.');
});

// 비디오 종료 시 이벤트 처리
video.addEventListener('ended', () => {
  console.log('비디오가 종료되었습니다.');
});

위 예시에서는 play, pause, ended 이벤트를 추적하고 해당 이벤트가 발생할 때마다 콘솔에 메시지를 출력하고 있습니다.

상태 추적하기

비디오의 재생 상태를 추적하기 위해서는 paused, ended 속성을 사용할 수 있습니다.

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

// 현재 재생 상태 확인
console.log('비디오 재생 상태:', video.paused ? '일시정지' : '재생 중');

// 비디오 종료 시 이벤트 처리
video.addEventListener('ended', () => {
  console.log('비디오가 종료되었습니다.');
});

위 예시에서는 paused 속성을 사용하여 비디오의 현재 재생 상태를 확인하고, ended 이벤트가 발생하면 콘솔에 메시지를 출력하고 있습니다.

이렇게 자바스크립트를 사용하여 HTML5 비디오의 이벤트와 상태를 추적할 수 있습니다. 이를 활용하면 비디오 재생에 따른 추가 기능을 구현할 수 있습니다. 예를 들어 특정 시간대에서의 이벤트 발생, 특정 상태에서의 스타일 변경 등을 할 수 있습니다.

#html5 #javascript