HTML5 비디오 요소는 동영상 재생을 위한 강력한 기능을 제공합니다. 이 중에서도 특히 자막 기능은 사용자가 동영상을 보다 편리하게 이해하고 활용할 수 있게 해줍니다. 이번 블로그 포스트에서는 HTML5 비디오 API를 사용하여 자막 선택 기능을 구현하는 방법을 알아보겠습니다.

1. 비디오 요소와 자막 트랙 설정하기

첫 번째로, HTML5 비디오 요소와 자막 트랙을 설정해야 합니다. 이를 위해서는 <video> 태그에서 src 속성에 동영상 파일 경로를 지정하고, <track> 태그를 사용하여 자막 파일 경로를 지정해야 합니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다.

<video src="video.mp4">
  <track src="subtitles.vtt" kind="subtitles" label="English" srclang="en">
  <track src="subtitles.ko.vtt" kind="subtitles" label="Korean" srclang="ko">
</video>

2. 자막 선택 버튼 생성하기

두 번째로, 자막을 선택할 수 있는 버튼을 생성해야 합니다. 이를 위해서는 <button> 태그를 사용하고, 자바스크립트 함수를 호출하여 자막을 활성화/비활성화하도록 설정합니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다.

<button onclick="toggleSubtitles()">자막 선택</button>

3. 자막 활성화/비활성화 함수 구현하기

세 번째로, 자바스크립트 함수를 구현하여 자막을 활성화/비활성화하는 기능을 추가해야 합니다. 이를 위해서는 TextTrack 객체를 사용하여 현재 활성화된 자막 트랙을 가져오고, 이를 통해 자막을 활성화/비활성화합니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다.

function toggleSubtitles() {
  var video = document.getElementsByTagName("video")[0];
  var track = video.textTracks[0];

  if (track.mode === "showing") {
    track.mode = "hidden";
  } else {
    track.mode = "showing";
  }
}

결론

위의 세 가지 단계를 따라가면 HTML5 비디오 API를 사용하여 자막 선택 기능을 손쉽게 구현할 수 있습니다. 이를 통해 사용자는 동영상을 보다 편리하고 유익하게 이용할 수 있게 됩니다. 추가적인 기능들을 구현하거나 사용자 경험을 개선하기 위해 자막 디자인 등을 커스터마이징할 수도 있습니다.

#programming #HTML5