[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 방문자 수 표시하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js를 웹 페이지에 추가합니다.

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

HTML에서 동영상 요소와 플레이어를 추가합니다.

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

JavaScript를 사용하여 방문자 수를 표시할 수 있도록 구현합니다.

var videoPlayer = videojs('my-video');

videoPlayer.on('timeupdate', function() {
    var currentTime = videoPlayer.currentTime();
    // 방문자 수를 가져오는 로직을 추가합니다.
    var visitorCount = getVisitorCount(); // 예시로 임의의 함수를 사용하였습니다.
    
    // 플레이어에 방문자 수를 표시합니다.
    var visitorCountElement = videoPlayer.controlBar.getChild('visitorCount');
    if (!visitorCountElement) {
        visitorCountElement = videoPlayer.controlBar.addChild('Component', {id: 'visitorCount'});
        visitorCountElement.addClass('vjs-icon-placeholder');
    }
    visitorCountElement.el().innerHTML = visitorCount + ' Visitors';
});

위의 코드는 Video.js를 사용하여 동영상 재생 중에 플레이어에 방문자 수를 표시하는 예시입니다. timeupdate 이벤트를 사용하여 각 재생 시간마다 방문자 수를 가져오고, 플레이어에 해당 값을 표시합니다. 이때, getVisitorCount 함수는 방문자 수를 가져오는 로직을 구현해야 합니다. 원하는 방식으로 방문자 수를 가져오는 함수를 작성하면 됩니다.

참고 문서