[javascript] Plyr을 사용하여 텍스트 형식의 자막 추가하기

27 Nov 2023

javascript

Plyr은 HTML5와 자바스크립트를 기반으로 한 멀티미디어 플레이어입니다. Plyr을 사용하면 영상에 자막을 추가하고 텍스트 형식의 자막 파일을 사용할 수 있습니다. 이번 포스트에서는 Plyr을 사용하여 텍스트 형식의 자막을 추가하는 방법에 대해 알아보겠습니다.

1. Plyr 라이브러리 추가하기

Plyr을 사용하기 위해 먼저 Plyr 라이브러리를 HTML 문서에 추가해야 합니다. 다음의 코드를 <head> 태그 안에 추가해주세요.

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>

2. HTML 비디오 요소 생성하기

자막을 추가할 비디오 요소를 HTML 문서에 생성해야 합니다. 비디오 요소에 data-plyr-config 속성을 추가하고 자막 파일의 URL을 지정해주세요. 다음은 예시 코드입니다.

<video controls crossorigin>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="captions" label="Korean" srclang="ko" default />
</video>

위의 코드에서 subtitles.vtt는 자막 파일의 URL을 나타냅니다. kind 속성은 자막의 종류를 지정하며, srclang 속성은 자막의 언어를 지정합니다. default 속성은 자막을 기본으로 표시되도록 설정하는데 사용됩니다.

3. Plyr 초기화하기

Plyr을 사용하려면 JavaScript로 Plyr 객체를 초기화해야 합니다. 다음은 초기화하는 방법입니다.

<script>
  const player = new Plyr('video', {
    captions: {
      active: true,
      update: true,
      language: 'auto',
    },
  });
</script>

위의 코드에서 'video'는 비디오 요소의 ID를 나타냅니다. 자막이 활성화되고 업데이트되며, 언어는 자동으로 감지되도록 설정됩니다. 원하는 대로 Plyr 초기화 옵션을 수정할 수 있습니다.

4. 결과 확인하기

이제 웹 페이지를 열어 비디오가 로드되고 Plyr 플레이어가 보여지는지 확인해보세요. 자막이 제대로 표시되는지 확인하고 필요에 따라 디자인을 수정할 수 있습니다.

결론

Plyr을 사용하여 텍스트 형식의 자막을 비디오에 추가하는 방법에 대해 알아보았습니다. Plyr을 사용하면 영상 재생 시 자막을 표시할 수 있으며, 자막 파일의 URL을 지정하여 다양한 언어의 자막을 추가할 수 있습니다. 자막을 추가하여 사용자가 영상을 더욱 쉽게 이해할 수 있도록 도움을 줄 수 있습니다.

참고: Plyr 공식 문서