[javascript] Plyr을 사용하여 동영상 플레이어에 챕터 네비게이션 추가하기

27 Nov 2023

javascript

Plyr은 HTML5 동영상 플레이어를 구축하기 위한 유명한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 동영상 재생, 일시정지, 음량 조절 등의 기능을 쉽게 추가할 수 있습니다.

하지만 기본적으로 Plyr은 챕터 네비게이션 기능을 제공하지 않습니다. 따라서 우리는 직접 Plyr 플레이어에 챕터 네비게이션을 추가해야 합니다.

챕터 네비게이션을 위한 데이터 구성하기

먼저, 동영상에 챕터 네비게이션을 추가하기 위해 데이터를 구성해야 합니다. 보통은 챕터의 제목과 해당 부분의 재생 시간을 포함하는 배열을 만듭니다.

const chapters = [
  { title: 'Chapter 1', start: 0, end: 60 },
  { title: 'Chapter 2', start: 61, end: 120 },
  { title: 'Chapter 3', start: 121, end: 180 }
];

Plyr 플레이어에 챕터 네비게이션 추가하기

Plyr 플레이어에 챕터 네비게이션을 추가하기 위해 다음 단계를 따릅니다.

Plyr 플레이어를 생성합니다.

const player = new Plyr('#video-player');

Plyr 플레이어의 ready 이벤트를 사용하여 플레이어가 준비되면 챕터 네비게이션을 추가합니다.

player.on('ready', () => {
  const controls = player.elements.controls;
  
  // 챕터 네비게이션 컨테이너 생성
  const chaptersContainer = document.createElement('div');
  chaptersContainer.classList.add('plyr__controls__chapters');
  
  // 챕터 버튼 생성 및 이벤트 핸들러 추가
  chapters.forEach((chapter, index) => {
    const chapterButton = document.createElement('button');
    chapterButton.classList.add('plyr__controls__chapters__chapter');
    chapterButton.textContent = chapter.title;
    
    chapterButton.addEventListener('click', () => {
      // 클릭된 챕터의 재생 시간으로 동영상을 이동시킵니다.
      player.currentTime = chapter.start;
      
      // 챕터 버튼 스타일 변경
      const activeButton = chaptersContainer.querySelector('.active');
      if (activeButton) {
        activeButton.classList.remove('active');
      }
      chapterButton.classList.add('active');
    });
    
    chaptersContainer.appendChild(chapterButton);
  });
  
  controls.appendChild(chaptersContainer);
});

챕터 클릭 시 동영상 재생 시간 변경하기

챕터 버튼을 클릭할 때, 클릭된 챕터의 재생 시간으로 동영상을 이동시키는 기능을 추가할 수 있습니다. 위의 코드에서는 각 챕터 버튼의 클릭 이벤트 핸들러에서 이 기능을 구현하고 있습니다.

chapterButton.addEventListener('click', () => {
  // 클릭된 챕터의 재생 시간으로 동영상을 이동시킵니다.
  player.currentTime = chapter.start;

  // 챕터 버튼 스타일 변경
  const activeButton = chaptersContainer.querySelector('.active');
  if (activeButton) {
    activeButton.classList.remove('active');
  }
  chapterButton.classList.add('active');
});

위의 코드에서 player.currentTime을 사용하여 동영상의 재생 시간을 변경하고, 챕터 버튼 스타일을 변경하여 현재 선택된 챕터를 표시합니다.

결과 확인하기

위의 코드를 적용하고 Plyr 플레이어를 사용하여 동영상을 재생하면 챕터 네비게이션을 확인할 수 있습니다. 각 챕터 버튼을 클릭하면 동영상이 해당 챕터의 시작 시간으로 이동하게 됩니다.

이처럼 Plyr 플레이어를 사용하여 동영상에 챕터 네비게이션을 추가할 수 있습니다. 챕터 네비게이션은 사용자가 동영상을 쉽게 탐색할 수 있도록 도와줍니다.

더 많은 Plyr 플레이어 기능을 알아보고 싶다면 Plyr 공식 사이트를 참고하시기 바랍니다.