Video.js는 HTML5 동영상 플레이어를 구축하기 위한 강력한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 동영상 플레이어에 다양한 동작을 추가할 수 있습니다. 이벤트를 활용한 동작 추가는 특히 유용한 방법 중 하나입니다.

Video.js에는 다양한 이벤트가 내장되어 있으며, 이벤트를 사용하여 동영상의 재생, 일시 정지, 완료 등과 같은 상태 변화를 감지할 수 있습니다. 이벤트 핸들러를 등록하여 특정 동작을 수행할 수 있습니다.

아래는 Video.js를 사용하여 동영상 재생 시 로그 메시지를 출력하는 예제 코드입니다:

const player = videojs('my-video');

// play 이벤트 핸들러 등록
player.on('play', () => {
  console.log('동영상이 재생되었습니다.');
});

// pause 이벤트 핸들러 등록
player.on('pause', () => {
  console.log('동영상이 일시 정지되었습니다.');
});

// ended 이벤트 핸들러 등록
player.on('ended', () => {
  console.log('동영상 재생이 완료되었습니다.');
});

위의 예제 코드에서 my-video는 동영상을 재생할 video 요소의 id입니다. 이벤트 핸들러는 on 메소드를 사용하여 등록되며, 첫 번째 인자로 이벤트 이름을 전달합니다. 이벤트 발생 시 실행될 콜백 함수를 두번째 인자로 전달합니다.

이제 동영상이 재생, 일시 정지, 완료될 때마다 해당 메시지를 콘솔에 출력하는 기능을 Video.js를 통해 구현할 수 있습니다.

Video.js 공식 문서에서 지원하는 다른 이벤트와 이벤트 핸들러에 대한 자세한 내용을 확인할 수 있으니 참고하시기 바랍니다.¹