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

24 Nov 2023

javascript

Video.js를 다운로드하고 웹 페이지에 추가한 후, 동영상 요소를 생성합니다. ```javascript

2. Video.js 플레이어를 초기화하고 커스텀 버튼을 추가합니다.
```javascript
<script>
  // Video.js 플레이어 초기화
  var player = videojs('my-video');

  // 커스텀 버튼 생성
  var shareButton = videojs.getComponent('Button');
  var shareButtonInstance = videojs.extend(shareButton, {
    constructor: function() {
      shareButton.apply(this, arguments);
      this.controlText('Share'); // 버튼 텍스트 설정
      this.addClass('vjs-share-button'); // 버튼 클래스 추가
    },
    handleClick: function() {
      // 공유 기능 구현
      alert('Share button clicked');
    }
  });

  player.getChild('controlBar').addChild(new shareButtonInstance());
</script>

동영상을 재생하면 플레이어 컨트롤 바에 “Share” 버튼이 추가되고 클릭 시 “Share button clicked” 메시지가 나타납니다.

이러한 방법으로 Video.js를 사용하여 동영상 재생 중에 플레이어에 공유하기 버튼을 추가할 수 있습니다.