[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 원하는 사운드 이퀄라이저 출력하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js 라이브러리를 다운로드하고 원하는 웹 페이지에 추가합니다.
HTML 파일에 동영상 플레이어를 만듭니다.

<video
  id="my-video"
  class="video-js"
  controls
  preload="auto"
  poster="poster.jpg"
  data-setup="{}"
>
  <source src="my-video.mp4" type="video/mp4" />
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank"
      >supports HTML5 video</a
    >
  </p>
</video>

JavaScript 파일을 생성하고 Video.js 플레이어를 초기화합니다.

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

player.ready(function () {
  // 이퀄라이저 컴포넌트 추가
  player.addChild("Equalizer");

  // 이퀄라이저 컴포넌트 옵션 설정
  player.equalizer({
    bands: 10, // 이퀄라이저 밴드 수
    filterType: "peaking", // 이퀄라이저 필터 타입
  });
});

CSS 파일을 생성하고 이퀄라이저 디자인을 변경할 수 있습니다.

.video-js vjs-equalizer {
  width: 100%;
  height: 20px;
  background: #f8f8f8;
}

.video-js vjs-equalizer-bar {
  background: #e60000;
}

이제 동영상을 재생하면 Video.js 플레이어에 이퀄라이저가 출력됩니다. 이퀄라이저의 디자인은 CSS 파일을 수정하여 변경할 수 있습니다. 필요에 따라 이퀄라이저의 기능도 JavaScript 파일을 수정하여 추가적인 커스터마이징이 가능합니다.

더 자세한 내용은 Video.js 공식 문서에서 확인할 수 있습니다.