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

24 Nov 2023

javascript

먼저, Video.js 플레이어를 생성하고 플레이리스트 기능을 추가해야 합니다. Video.js 플레이어는 <video> 요소를 포함하는 HTML 엘리먼트입니다. 다음은 기본적인 Video.js 플레이어의 코드 예시입니다.

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

플레이리스트를 추가하기 위해 playlist 플러그인을 설치해야 합니다. Video.js 플러그인은 JavaScript 파일로 제공되며, <script> 태그를 사용하여 HTML 페이지에 추가해야 합니다.

<script src="video.js"></script>
<script src="videojs-playlist.js"></script>

이제 플레이리스트 기능을 플레이어에 추가할 수 있습니다. 다음은 플레이어에 플레이리스트를 추가하는 JavaScript 코드입니다.

var player = videojs('my-video');
player.playlist({
  mediaType: 'video', // 플레이리스트에 포함되는 미디어 유형 (예: 'video', 'audio')
  items: [ // 플레이리스트에 포함될 동영상 목록
    {
      sources: [
        { src: 'video1.mp4', type: 'video/mp4' },
        { src: 'video1.webm', type: 'video/webm' }
      ],
      poster: 'video1-poster.jpg' // 동영상의 포스터 이미지 경로
    },
    {
      sources: [
        { src: 'video2.mp4', type: 'video/mp4' },
        { src: 'video2.webm', type: 'video/webm' }
      ],
      poster: 'video2-poster.jpg'
    },
    // 추가 동영상을 여기에 추가할 수 있습니다.
  ]
});

이제 플레이리스트를 추가한 Video.js 플레이어가 있습니다. items 배열에는 플레이리스트에 포함될 각 동영상에 대한 정보가 포함됩니다. 동영상의 소스(sources)와 포스터 이미지(poster) 등을 지정할 수 있습니다. 새로운 동영상을 플레이리스트에 추가하려면 items 배열에 객체를 추가하면 됩니다.

플레이리스트에 추가된 각 동영상은 플레이어 컨트롤바나 진행 막대를 사용하여 재생할 수 있습니다. 또한, playlist 플러그인을 사용하여 플레이리스트 전환 및 다음 동영상 재생 등의 기능도 제공됩니다.

더 많은 Video.js 플레이어 옵션 및 기능에 대한 정보는 Video.js 공식 문서를 참조하세요.