[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 마우스 호버 시 컨트롤 바 색상 변경하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, Video.js를 프로젝트에 추가하고 설정해야 합니다. CDN을 사용하여 Video.js를 추가하는 예시 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
</head>
<body>
  <video id="my-video" class="video-js"></video>
  <script>
    var player = videojs('my-video', {
      controls: true,
      autoplay: false,
      preload: 'auto'
    });
  </script>
</body>
</html>

플레이어에 마우스 호버를 했을 때 컨트롤 바의 색상을 변경하려면 CSS를 사용하여 스타일을 조정해야 합니다. 다음은 컨트롤 바의 색상을 변경하는 CSS 코드입니다.

/* 기본 컨트롤 바의 색상 */
.vjs-default-skin .vjs-control-bar {
  background-color: #f00; /* 원하는 색상으로 변경 */
}

/* 마우스 호버 시의 컨트롤 바의 색상 */
.vjs-default-skin.vjs-hover .vjs-control-bar {
  background-color: #00f; /* 원하는 색상으로 변경 */
}

CSS 코드를 적용하기 위해 HTML 파일의 <head> 요소 안에 <style> 태그를 추가하고 위의 CSS 코드를 넣어주면 됩니다.

<head>
  <!-- 이전 코드 생략 -->
  <style>
    /* CSS 코드를 여기에 추가 */
  </style>
</head>

이제 마우스 호버 시 컨트롤 바의 색상이 변경되는 것을 확인할 수 있습니다. 컨트롤 바의 색상을 원하는대로 변경하여 플레이어를 디자인할 수 있습니다.

Video.js 문서에서 더 많은 사용 방법과 옵션에 대한 정보를 확인할 수 있습니다.