[javascript] Video.js의 스킨을 변경하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js는 HTML5 비디오 플레이어를 구현하는 오픈 소스 JavaScript 라이브러리입니다. Video.js를 사용하여 비디오 플레이어를 생성하고 스킨을 변경하는 방법에 대해 알아보겠습니다.

Video.js 설치하기 Video.js를 사용하기 위해 먼저 해당 라이브러리를 다운로드하거나 CDN을 통해 불러와야 합니다. 아래는 CDN을 통해 Video.js를 불러오는 방법입니다.
```
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
```
비디오 플레이어 생성하기 Video.js를 사용하여 비디오 플레이어를 생성합니다. 아래는 가장 기본적인 비디오 플레이어 생성 코드입니다.
```
<video id="my-video" class="video-js" controls>
  <source src="my-video.mp4" type="video/mp4">
</video>

<script>
  var player = videojs('my-video');
</script>
```
스킨 변경하기 Video.js에서는 커스텀 스킨을 사용하여 기본 스타일을 변경할 수 있습니다. 스킨은 CSS 파일로 제공되며, Video.js의 스타일 클래스를 수정하여 원하는 스타일을 적용할 수 있습니다.

가장 간단한 방법은 Video.js에서 제공하는 테마 중 하나를 사용하는 것입니다. 테마 파일을 다운로드하고 스타일시트에 링크를 추가하여 테마를 적용합니다. 예를 들어, video-js 클래스를 vjs-theme-sea로 변경하여 바다 테마를 적용하는 코드는 다음과 같습니다.
```
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<link href="https://unpkg.com/video.js/dist/theme-sea.css" rel="stylesheet">

<video id="my-video" class="video-js vjs-theme-sea" controls>
  <source src="my-video.mp4" type="video/mp4">
</video>

<script>
  var player = videojs('my-video');
</script>
```
또 다른 방법은 직접 CSS를 작성하여 비디오 플레이어의 스타일을 변경하는 것입니다. Video.js는 많은 클래스를 제공하므로, 해당 클래스를 사용하여 스타일을 수정하면 됩니다.
```
.vjs-my-skin .vjs-play-progress {
  background-color: red;
}
```
```
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">

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

<script>
  var player = videojs('my-video');
</script>
```
위의 코드에서 .vjs-my-skin 클래스를 사용하여 비디오 컨트롤의 재생 진행 바 배경색을 빨간색으로 변경하였습니다.

Video.js를 사용하여 비디오 플레이어를 생성하고 스킨을 변경하는 방법을 알아보았습니다. 스킨을 변경함으로써 비디오 플레이어의 디자인을 원하는 대로 커스터마이즈할 수 있습니다.