Video.js는 사용자 정의 컨트롤을 플레이어에 추가하는 것을 지원합니다. 따라서 동영상 재생 중에 좋아요/싫어요 버튼을 추가하는 것이 가능합니다.

먼저 Video.js 플레이어를 생성하고 <div> 요소에 플레이어를 추가합니다.

<div>
  <video id="my-video" class="video-js" controls>
    <source src="path/to/video.mp4" type="video/mp4">
    <!-- 다른 포맷의 비디오 소스를 추가할 수 있습니다 -->
  </video>
</div>

다음으로 플레이어의 컨트롤 바에 좋아요/싫어요 버튼을 추가할 수 있는 컴포넌트를 생성해야 합니다. Video.js에서 컨트롤 바에 사용자 정의 버튼을 추가하는 방법은 다음과 같습니다.

// 플레이어 생성 및 초기화
var player = videojs('my-video');

// 사용자 정의 버튼 생성
var LikeButton = videojs.extend(videojs.getComponent('Button'), {
  constructor: function() {
    videojs.getComponent('Button').apply(this, arguments);
    this.addClass('vjs-like-button');
    this.controlText('좋아요');
  },
  handleClick: function() {
    // 좋아요 버튼을 클릭했을 때 수행할 동작을 여기에 작성
    console.log('좋아요 버튼이 클릭되었습니다!');
  }
});

// 컨트롤 바에 버튼 추가
videojs.registerComponent('LikeButton', LikeButton);
player.getChild('controlBar').addChild('LikeButton', {});

위의 코드에서 LikeButton 클래스는 Button 컴포넌트를 확장한 것입니다. constructor 메소드에서는 버튼에 CSS 클래스를 추가하고 버튼의 텍스트를 설정하고 있습니다. handleClick 메소드는 버튼이 클릭되었을 때 수행할 동작을 정의할 수 있습니다.

마지막으로 LikeButton을 컨트롤 바에 추가하기 위해 registerComponent 메소드를 사용하고, addChild 메소드를 사용하여 LikeButton을 컨트롤 바의 자식 요소로 추가합니다.

이제 동영상을 재생할 때 좋아요 버튼을 클릭할 수 있으며, handleClick 메소드에서 원하는 동작을 수행할 수 있습니다.

더 자세한 Video.js의 사용법은 Video.js 공식 문서를 참고하시기 바랍니다:

• Video.js 공식 문서: https://docs.videojs.com
• Video.js GitHub 저장소: https://github.com/videojs/video.js