[javascript] Video.js를 사용하여 자막을 추가하는 방법은 무엇인가요?

24 Nov 2023

javascript

Video.js를 사용하여 자막을 추가하는 방법은 다음과 같습니다:

Video.js와 video.js-contrib-hls 플러그인을 HTML 페이지에 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Video.js 자막 추가</title>
    <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@5.15.0/dist/videojs-contrib-hls.min.js"></script>
</head>
<body>
    <video id="my-video" class="video-js" controls>
        <source src="my-video.mp4" type="video/mp4">
        <track kind="subtitles" src="my-video.vtt" srclang="en" label="English" default>
    </video>

    <script>
      var player = videojs('my-video');
      player.play();
    </script>
</body>
</html>

<video> 태그 안에 <track> 태그를 추가하여 자막 파일을 지정합니다. kind 속성은 “subtitles”을, src 속성은 자막 파일의 경로를, srclang 속성은 자막 파일의 언어를, label 속성은 자막 표시 이름을 지정합니다. default 속성을 사용하여 기본 자막을 설정할 수도 있습니다.
위의 코드를 HTML 파일에 추가하고, 자막 파일과 동영상 파일을 적절한 경로에 저장합니다.
웹 브라우저에서 HTML 파일을 열면 Video.js 플레이어가 표시되고, 자막이 동영상에 추가됩니다.

자막은 주로 .vtt 파일 형식으로 제공되며, 해당 파일은 WebVTT(Web Video Text Tracks) 형식을 따라야 합니다. 자막 파일은 텍스트 편집기로 생성할 수 있으며, 텍스트 파일에 시간과 텍스트를 지정하여 사용자가 자막을 볼 수 있도록 합니다.

더 많은 Video.js의 기능과 사용법에 대해서는 Video.js 공식 문서를 참조하시기 바랍니다.