자바스크립트를 사용하여 HTML5 비디오 서브타이틀 표시하기

10 Nov 2023

javascript

HTML5의 <video> 요소를 사용하면 웹 페이지에 비디오를 쉽게 삽입할 수 있습니다. 이 비디오 요소는 특히 자바스크립트를 사용하여 동적인 기능을 추가할 수 있는 장점이 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 HTML5 비디오에 서브타이틀(subtitle)을 표시하는 방법을 알아보겠습니다.

1. 비디오와 서브타이틀 파일 준비하기

먼저, HTML5 비디오 요소를 추가하고 플레이할 비디오 파일을 준비해야 합니다. 또한, 서브타이틀 파일도 준비해야 합니다. 대부분의 비디오 플레이어에서는 서브타이틀을 표시하기 위해 SRT(SubRip) 파일 형식을 지원합니다. 따라서 SRT 파일로 서브타이틀을 작성하고 준비해야 합니다.

2. 자바스크립트 코드 작성하기

아래는 자바스크립트를 사용하여 HTML5 비디오에 서브타이틀을 표시하는 간단한 예제 코드입니다.

const video = document.querySelector('video');
const subtitles = document.querySelector('#subtitles');

video.addEventListener('timeupdate', function() {
  const currentTime = video.currentTime;

  // 현재 시간에 해당하는 서브타이틀 찾기
  let subtitleToShow = null;
  for (let i = 0; i < subtitles.children.length; i++) {
    const subtitle = subtitles.children[i];
    const startTime = subtitle.dataset.start;
    const endTime = subtitle.dataset.end;

    if (startTime <= currentTime && currentTime <= endTime) {
      subtitleToShow = subtitle;
      break;
    }
  }

  // 서브타이틀 표시하기
  for (let i = 0; i < subtitles.children.length; i++) {
    const subtitle = subtitles.children[i];

    if (subtitle === subtitleToShow) {
      subtitle.style.display = 'block';
    } else {
      subtitle.style.display = 'none';
    }
  }
});

위 코드는 HTML5 비디오 요소와 서브타이틀을 나타내는 요소의 ID를 선택하고, timeupdate 이벤트를 수신하여 현재 시간에 해당하는 서브타이틀을 찾아 화면에 표시하는 동작을 구현하고 있습니다.

3. HTML 마크업 작성하기

비디오와 서브타이틀 파일을 준비했다면, HTML 마크업에 해당 요소를 추가해야 합니다. 아래는 비디오 요소와 서브타이틀을 표시할 요소의 예제 코드입니다.

<video src="video.mp4"></video>

<div id="subtitles">
  <span data-start="0" data-end="5">안녕하세요!</span>
  <span data-start="5" data-end="10">반갑습니다.</span>
  <span data-start="10" data-end="15">자바스크립트로 서브타이틀을 표시합니다.</span>
</div>

위 코드에서 #subtitles 요소는 서브타이틀을 포함하는 부모 요소입니다. 개별 서브타이틀은 <span> 요소로 표시되며, data-start 및 data-end 속성을 사용하여 각 서브타이틀의 시작 및 종료 시간을 지정합니다.

4. 서브타이틀 표시 확인하기

모든 준비가 끝났으면, 자바스크립트 코드를 실행하여 비디오와 서브타이틀을 확인할 수 있습니다. 비디오를 재생하면서 현재 시간에 해당하는 서브타이틀이 표시될 것입니다.

이제 자바스크립트를 사용하여 HTML5 비디오에 서브타이틀을 표시하는 방법을 알게 되었습니다. 추가적인 기능을 구현하려면 자바스크립트 코드를 수정하거나 다른 서비스를 활용할 수 있습니다.

참고 자료:

#자바스크립트 #HTML5 #비디오 #서브타이틀