Video.js는 HTML5 비디오 플레이어를 제어할 수 있는 JavaScript 라이브러리입니다. 자막은 비디오 재생 중에 텍스트로 표시되어야 하므로, Video.js를 사용하여 자막을 플레이어에 추가할 수 있습니다.

먼저, Video.js 라이브러리를 불러온 후, 자막 파일을 포맷에 맞게 준비해야 합니다. 보통 자막 파일은 SRT(subrip) 형식으로 되어 있습니다. 자막 파일은 비디오 파일과 같은 디렉토리에 위치하도록 해야 합니다.

다음으로, HTML에 Video.js 플레이어를 추가합니다. 아래는 기본적인 Video.js 플레이어 코드입니다.

<video id="my-video" class="video-js vjs-default-skin" controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles.srt" srclang="en" label="English" default>
</video>

<source> 태그에서 비디오 파일(video.mp4)의 경로를 지정하고, <track> 태그에서 자막 파일(subtitles.srt)의 경로를 지정합니다.

이제 자막 파일을 로드하고, 플레이어에 번역 기능을 추가해야 합니다. Video.js에서 제공하는 textTracks() 메서드를 사용하여 자막 트랙을 가져올 수 있습니다. 아래 예제 코드를 참고하세요.

var player = videojs('my-video');

player.ready(function() {
    var track = player.textTracks()[0];

    track.on('loadeddata', function() {
        // 자막 트랙 로드 시 실행되는 코드
        // 여기서 자막 번역 기능을 구현하세요
    });
});

위 코드에서 loadeddata 이벤트 리스너에서 자막 트랙이 로드될 때 실행되는 코드를 작성하면 됩니다. 이 코드에서는 자막 번역 기능을 구현해야 합니다. 자막 트랙의 텍스트를 가져와 번역 API를 사용하여 번역한 후, 플레이어에 표시하는 방식으로 구현할 수 있습니다.

자막 번역은 “번역 API를 사용하여 텍스트를 번역하는 방법”에 따라 다를 수 있으므로, 해당 API의 문서를 참고하여 구현해야 합니다.

Video.js를 사용하여 동영상 재생 중에 플레이어에 자막 번역 기능을 추가하는 방법에 대해 알아보았습니다. 자막 파일과 자막 번역 기능을 구현하는 과정에서 자신의 요구 사항에 맞게 수정해야 합니다.