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

24 Nov 2023

javascript

먼저, Video.js를 웹 페이지에 추가하고 플레이어를 생성해야합니다. HTML 파일의 <head> 태그 내에 다음 코드를 추가합니다:

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

다음으로, 동영상을 포함할 <video> 태그를 추가합니다. 이 예제에서는 example-video라는 ID를 가진 <div> 태그 안에 동영상을 추가했습니다.

<div id="example-video">
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="480">
        <source src="path/to/video.mp4" type="video/mp4">
    </video>
</div>

이제, 플레이어를 초기화하고 툴팁을 추가할 수 있습니다. JavaScript 파일에서 다음 코드를 추가합니다:

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

// 툴팁을 추가할 컴포넌트 생성
var customControl = videojs.extend(videojs.getComponent('Component'), {
    constructor: function() {
        videojs.getComponent('Component').apply(this, arguments);
    },
    createEl: function() {
        return videojs.dom.createEl('div', {
            className: 'custom-control video-js-tip',
            innerHTML: '나만의 툴팁'
        });
    }
});

// 플레이어에 커스텀 컨트롤 추가
player.getChild('controlBar').addChild('customControl', {});

// CSS 스타일로 툴팁 위치 조정
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.custom-control { position: absolute; top: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.75); color: white; padding: 5px; }';
document.head.appendChild(style);

위의 코드에서 innerHtml에 원하는 툴팁 텍스트를 작성할 수 있으며, CSS 부분을 조정하여 툴팁을 원하는 위치로 이동시킬 수 있습니다.

이제 웹 페이지를 새로고침하고 동영상 재생 중에 플레이어에 툴팁이 표시되는 것을 확인할 수 있습니다.

참고: 이 예제는 Video.js 7.14.3 버전에서 작동하도록 작성되었습니다. Video.js 라이브러리의 다른 버전을 사용하는 경우 일부 코드를 조정해야 할 수 있습니다.