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

24 Nov 2023

javascript

Video.js는 HTML5 비디오 플레이어를 구축하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다. 플레이어에 전체화면 토글 버튼을 추가하려면 다음과 같이 작성할 수 있습니다.

Video.js 라이브러리를 HTML 파일에 추가합니다.

<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.js 플레이어를 초기화합니다.

<video id="my-video" class="video-js vjs-default-skin" controls>
  <source src="path/to/video.mp4" type="video/mp4" />
</video>

<script>
  var player = videojs('my-video');
</script>

플레이어에 전체화면 토글 버튼을 추가하는 커스텀 버튼을 정의합니다.

videojs.registerComponent('fullscreenToggle', videojs.extend(videojs.getComponent('Button'), {
  constructor: function() {
    videojs.getComponent('Button').call(this, player, {
      children: ['fullscreenToggleIcon'],
      className: 'vjs-fullscreen-toggle-button vjs-control',
      clickHandler: this.handleClick
    });
  },
  
  handleClick: function() {
    player.toggleFullscreen();
  }
}));

videojs.registerComponent('fullscreenToggleIcon', videojs.extend(videojs.getComponent('Component'), {
  constructor: function() {
    videojs.getComponent('Component').call(this, player, {
      className: 'vjs-fullscreen-toggle-icon vjs-control',
      textContent: 'Fullscreen',
      clickHandler: this.handleClick
    });
  },
  
  handleClick: function() {
    player.toggleFullscreen();
  }
}));

플레이어에 커스텀 버튼을 추가합니다.

player.getChild('controlBar').addChild('fullscreenToggle', {});

이제 Video.js 플레이어에 전체화면 토글 버튼이 추가되었습니다. 사용자가 버튼을 클릭하면 동영상을 전체화면으로 확대하거나 원래 크기로 되돌릴 수 있습니다. 자세한 내용은 Video.js 공식 문서를 참조하십시오.