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

24 Nov 2023

먼저, Video.js 라이브러리를 웹 페이지에 추가합니다. 이를 위해 다음과 같이 스크립트 태그를 사용하여 Video.js 라이브러리를 로드합니다.

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

그리고 다음과 같이 비디오 플레이어를 생성하고, 속성을 설정합니다.

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

위의 코드에서 src 속성은 재생할 동영상 파일의 경로를 지정합니다.

마지막으로, 플레이어에 다운로드 버튼을 추가하기 위해 다음과 같이 스크립트를 작성합니다.

var player = videojs('my-video');
player.ready(function () {
  // 다운로드 버튼 추가
  player.controlBar.addChild('DownloadButton');
});

위의 스크립트는 비디오 플레이어를 선택하고, ready 이벤트가 발생했을 때 다운로드 버튼을 추가하는 역할을 합니다.

이제 웹 페이지를 브라우저에서 열어보면 동영상 재생 중에 다운로드 버튼이 플레이어에 추가된 것을 확인할 수 있습니다.

참고 문서: