[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 마우스 클릭 이벤트 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js 라이브러리를 HTML 파일에 추가합니다. 다음 코드를 <head> 태그 내에 추가합니다:

<link href="https://vjs.zencdn.net/7.15.0/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.15.0/video.js"></script>

동영상을 플레이하고자 하는 <video> 요소를 추가합니다. 다음과 같이 코드를 작성합니다:

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
    <source src="video.mp4" type="video/mp4">
</video>

JavaScript에서 플레이어 객체를 얻은 다음, click 이벤트에 대한 이벤트 리스너를 추가합니다. 다음 코드를 JavaScript 파일에 추가합니다:

document.addEventListener('DOMContentLoaded', function() {
    var myPlayer = videojs('my-video');
    myPlayer.on('click', function() {
        // 클릭 이벤트 발생 시 실행할 코드를 작성합니다.
        console.log('플레이어가 클릭되었습니다!');
    });
});

위의 코드에서는 my-video라는 ID를 가진 요소를 감싸고 있는 Video.js 플레이어 객체를 생성한 후, 이 플레이어 객체에 대해 click 이벤트를 감지하고 클릭 이벤트가 발생할 때마다 실행될 코드를 작성하였습니다. 위의 예시에서는 콘솔에 클릭 이벤트가 발생했음을 표시하는 메시지를 출력하도록 작성되었습니다.

이렇게 Video.js를 사용하여 플레이어에 마우스 클릭 이벤트를 추가할 수 있습니다. 추가로 다른 원하는 동작을 구현하고자 한다면 해당 이벤트 리스너 내에서 원하는 작업을 수행하면 됩니다.