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

24 Nov 2023

javascript

Video.js를 사용하여 동영상 재생 중에 플레이어에 퀵 액션 버튼을 추가하는 방법은 다음과 같습니다:

Video.js 라이브러리를 웹 페이지에 추가합니다. 일반적으로 다음과 같은 스크립트 태그를 사용하여 추가할 수 있습니다:
```
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
```

동영상을 재생할 <video> 태그를 작성합니다:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360">
  <source src="path/to/video.mp4" type="video/mp4">
</video>

JavaScript 코드에서 Video.js를 초기화하고 플레이어를 커스터마이즈합니다:

var player = videojs('my-video');

// 플레이어 UI에 새로운 버튼을 추가합니다
player.ready(function() {
  var myButton = this.controlBar.addChild('button');
  myButton.addClass('my-button');
  myButton.el().innerHTML = '액션';
  myButton.on('click', function() {
    // 액션 버튼을 클릭했을 때 수행할 동작을 구현합니다
    console.log('액션 버튼이 클릭되었습니다');
  });
});

이 코드는 Video.js 플레이어를 초기화한 뒤, 플레이어 UI의 controlBar에 새로운 버튼을 추가하고, 해당 버튼을 클릭했을 때 동작을 수행하도록 합니다. 버튼에는 “액션”이라는 텍스트가 표시되며, 버튼을 클릭하면 콘솔에 “액션 버튼이 클릭되었습니다”라는 메시지가 출력됩니다.

웹 페이지에서 Video.js 스타일 시트를 로드합니다. 일반적으로는 다음과 같은 링크 태그를 사용하여 로드할 수 있습니다:
```
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
```

위의 단계를 따라하면 Video.js를 사용하여 동영상 재생 중에 플레이어에 퀵 액션 버튼을 추가할 수 있습니다. 추가로 Video.js의 다양한 기능과 커스터마이즈 옵션을 활용하여 원하는 동작을 구현할 수도 있습니다.

참고 문서:

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