[javascript] Plyr을 사용한 동영상 플레이어에 자막 추가하기

27 Nov 2023

javascript

Plyr은 HTML5 동영상 플레이어를 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 이번에는 Plyr을 사용하여 동영상 플레이어에 자막을 추가하는 방법에 대해 알아보겠습니다.

자막 파일 준비

먼저, 동영상에 추가하고 싶은 자막 파일을 준비해야 합니다. Plyr은 다양한 자막 포맷을 지원하므로, .vtt 또는 .srt 등의 포맷 중 하나를 선택하여 자막 파일을 작성합니다.

예를 들어, example.vtt라는 자막 파일을 준비했다고 가정해보겠습니다.

HTML 구조 설정

Plyr을 사용하여 동영상 플레이어를 추가하고자 하는 HTML 파일을 열고, 다음과 같이 구조를 설정합니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path/to/plyr.css">
</head>
<body>
    <video id="player" playsinline>
        <source src="path/to/video.mp4" type="video/mp4">
        <!-- 자막 추가하기 -->
        <track kind="captions" src="path/to/example.vtt" srclang="en" label="English">
    </video>

    <script src="path/to/plyr.js"></script>
    <script>
        // Plyr 초기화
        const player = new Plyr('#player');
    </script>
</body>
</html>

위의 코드에서는 video 태그 내에 track 태그를 추가하여 자막 파일을 지정하고 있습니다. src 속성을 통해 자막 파일의 경로를 지정하고, srclang 속성으로 자막의 언어를 설정합니다. label 속성은 자막 선택 메뉴에 표시될 레이블을 설정하는데 사용됩니다.

스크립트 추가

위의 코드에서는 Plyr 라이브러리를 로드하고, new Plyr('#player')를 통해 동영상 플레이어를 초기화하고 있습니다.

결과 확인

웹 브라우저에서 위의 HTML 파일을 실행하고 동영상 플레이어를 확인해보세요. 재생 중인 동영상에 자막 버튼이 나타나며, 자막을 선택하여 표시할 수 있을 것입니다.

자막 파일에 특정 시간대의 자막이 없는 경우, Plyr은 동영상의 오디오 트랙 내용을 이용해 대체 자막을 생성할 수도 있습니다. 따라서, 자막 파일이 없는 경우에도 자막 기능을 사용할 수 있는 장점이 있습니다.

더 자세한 설정 및 사용 방법에 대해서는 Plyr 공식 문서를 참고해보세요.