[javascript] Plyr을 사용하여 다국어 자막 지원하기

27 Nov 2023

javascript

Plyr은 HTML5 플레이어 라이브러리로, 오디오 또는 비디오를 웹 페이지에 쉽게 추가하고 커스텀할 수 있게 해줍니다. 이 라이브러리는 다양한 기능을 제공하는데, 그 중 하나가 다국어 자막을 지원하는 기능입니다.

다국어 자막 파일 준비하기

Plyr은 .vtt 확장자를 가진 자막 파일을 지원합니다. 자막 파일은 다국어별로 제공되어야 하며, 다음과 같은 형식이어야 합니다.

WEBVTT

00:00:00.000 --> 00:00:05.000
첫 번째 자막의 내용

00:00:05.000 --> 00:00:10.000
두 번째 자막의 내용

...

Plyr 설정하기

Plyr을 사용하기 위해서는 우선 Plyr 라이브러리를 웹 페이지에 추가해야 합니다. 다음은 CDN을 통해 Plyr을 불러오는 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Plyr Example</title>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
</head>
<body>
  <video id="player" controls>
    <source src="video.mp4" type="video/mp4">
    <!-- 다른 비디오 소스 추가 -->
  </video>
  <script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
  <script>
    const player = new Plyr('#player');
  </script>
</body>
</html>

다국어 자막 추가하기

Plyr에서 다국어 자막을 추가하기 위해서는 자막 파일의 URL과 해당 자막의 언어 코드를 명시해야 합니다. 다음은 Plyr에서 다국어 자막을 추가하는 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Plyr Example</title>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
</head>
<body>
  <video id="player" controls>
    <source src="video.mp4" type="video/mp4">
    <!-- 다른 비디오 소스 추가 -->
  </video>
  <script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
  <script>
    const player = new Plyr('#player', {
      captions: {
        active: true,
        language: 'en',
        update: true
      }
    });

    player.source = {
      type: 'video',
      title: 'Example Title',
      sources: [
        {
          src: 'video.mp4',
          type: 'video/mp4',
        },
      ],
      tracks: [
        {
          kind: 'captions',
          label: 'English',
          srclang: 'en',
          src: 'english.vtt',
          default: true
        },
        {
          kind: 'captions',
          label: 'Korean',
          srclang: 'ko',
          src: 'korean.vtt'
        },
        // 다른 언어에 대한 자막 파일 추가
      ]
    };
  </script>
</body>
</html>

위 예시에서 tracks 배열에 다국어 자막 파일의 정보를 추가합니다. kind는 captions로 설정하며, label은 언어 이름을 나타냅니다. srclang은 자막의 언어 코드입니다. src는 자막 파일의 URL을 지정합니다.

다음으로, captions 객체에서 active를 true로 설정하면 자막이 기본적으로 활성화됩니다. language는 자막의 기본 언어를 나타내며, update를 true로 설정하면 Plyr이 자막 파일을 업데이트할 수 있습니다.

Plyr을 사용하여 다국어 자막을 쉽게 지원할 수 있습니다. Plyr의 다양한 기능을 활용하여 웹 비디오 플레이어를 더욱 강화할 수 있습니다.

참고문서: