[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 구독하기 버튼 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, Video.js 플레이어를 HTML 문서에 추가해야 합니다:

<video id="my-video" class="video-js" controls>
  <source src="video.mp4" type="video/mp4">
  <p class="vjs-no-js">
    JavaScript를 활성화하세요.
  </p>
</video>

다음으로, 플레이어에 구독하기 버튼을 추가하려면 JavaScript 코드를 사용하면 됩니다. Video.js를 초기화한 후, controlBar에 원하는 커스텀 버튼을 추가할 수 있습니다.

var player = videojs('my-video');
player.ready(function() {
  var subscribeButton = player.controlBar.addChild('button');

  subscribeButton.addClass('vjs-subscribe-button');
  subscribeButton.text('구독하기');

  subscribeButton.on('click', function() {
    // 구독 버튼을 클릭했을 때 실행될 코드를 작성하세요.
    console.log('구독 버튼을 클릭하였습니다.');
  });
});

위의 코드에서, vjs-subscribe-button 클래스가 추가된 버튼을 생성하고 텍스트를 설정합니다. 그리고 구독 버튼을 클릭했을 때 실행될 코드를 작성할 수 있습니다.

이제 동영상을 재생하고 플레이어에 구독하기 버튼을 클릭하면 콘솔에 “구독 버튼을 클릭하였습니다.”라는 메시지가 출력됩니다.

참고문헌: