오디오 & 비디오 재생하기 3

오디오 & 비디오 재생하기 3

<track> 태그 - 비디오 화면에 자막 추가하기

• HTML5에서는 비디오 콘텐츠를 웹 페이지에 삽입할 때 청각장애인용 자막을 표시하는 것이 기본입니다.
• 이런 자막은 청각장애인에게 도움이 될 뿐만 아니라 주변 소음이나 소리를 들을 수 없는 상황에서 비디오 내용을 이해하는 데도 많은 도움이 됩니다.
• HTML5에서는 <track> 태그를 이용해 외부 자막 파일을 연결할 수 있습니다.

 

기본형 : <track kind="자막 종류" src="경로" srclang="언어" label="제목" default>

 

1. <track> 태그의 속성

1) kind 속성 - 자막의 종류를 지정

속성 값	설 명
subtitles	자막입니다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하면 비디오 화면에 표시됩니다.(기본 값)
captions	캡션입니다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사용합니다. 비디오 화면에 표시됩니다.
descriptions	비디오 콘텐츠에 대한 설명입니다. 비디오 화면에는 표시되지 않습니다.
chapters	비디오 탐색을 위한 장 제목입니다. 비디오 화면에는 표시되지 않습니다.
metadata	비디오 콘텐츠 정보입니다. 비디오 화면에 표시되지 않습니다.

 

2) src 속성 - 자막 텍스트의 파일 경로를 지정

3) srclang 속성 - 사용한 언어를 지정

• kind 속성 값이 subtitle이라면 반드시 지정해야 하는데 en이나 ko처럼 언어를 나타내는 약자로 표기합니다.

 

4) label 속성 - 제목을 지정

• 자막이 여러 개일 경우, 자막을 식별할 수 있도록 제목을 달아줍니다.

 

5) default 속성 - 기본으로 사용할 자막을 default로 지정

• 자막 파일이 여러 개일 경우, 기본으로 사용할 자막을 default로 지정할 수 있습니다.

 

• 사용 예) 한글 자막 내용이 exam1.vtt 파일에 있고 한국어를 기본 언어로 설정할 때

<track kind="subtitles" src="exam1.vtt" srclang="ko" label="korean" default>

 

2. WebVTT 자막 파일

• 보통 컴퓨터에서 외국어로 된 영화나 드라마를 재생할 때 함께 사용하는 자막 파일은 smi 파일이나 srt 파일입니다.
• smi 파일은 자막 내용만 들어 있는 반면, srt 파일에는 자막의 시작 시간과 종료 시간 같은 시간 정보가 함께 들어 있습니다.
• 대부분 비디오 재생 프로그램에서는 smi와 srt 파일을 함께 지원하지만 상황에 따라 두 파일을 변환해 사용합니다.
• HTML5에서는 srt 파일을 사용하지만 모든 브라우저에서 공식적으로 지원하는 자막 파일 형식은 WebVTT(웹 비디오 텍스트 트랙, Web Video Text Track) 형식입니다. 파일 확장자는 .vtt이고 파일안에 자막 내용과 시간을 담고 있습니다. 간단히 줄여 vtt 파일이라고 부릅니다.
• vtt 파일은 메모장이나 노트패드++ 같은 텍스트 편집기에 입력한 후, vtt 파일로 저장해 사용하면 됩니다.

 

기본형 : 시작 시간 --> 종료 시간 -->자막 내용
             시작 시간 --> 종료 시간 -->자막 내용
              ... ...

 

• 자막의 시작 시간과 종료 시간은 "HH:MM:SS.ttt" 형식으로 표시합니다.
• HH는 시(hours), MM은 분(minutes), SS는 초(seconds), tt는 밀리초(milliseconds)를 나타내고 시작 시간과 종료 시간 사이에는 '-->' 기호를 넣어 시간이 흘렀음을 표시합니다.
• 자막 내용은 한 줄 이상 입력할 수 있으며 하나의 자막이 끝나면 빈 줄을 넣어 자막이 끝났음을 알려 준후 다음 자막으로 넘어가야 합니다.

 

사용 예)
      WEBVTT

         00:00:000 --> 00:04.139
         죽는 날까지 하늘을 우러러

         00:04:139 --> 00:08.112
         한 점 부끄럼이 없기를

         00:08:112 --> 00:12.153
        잎새에 이는 바람에도

         00:12.153 --> 00:26.175
         나는 괴로워했다

3. 비디오 파일에 자막 파일 연결하기

• 비디오 파일과 자막 파일이 모두 준비되었다면 다음과 같이 <track> 태그를 사용해 연결합니다.

사용 예)
<video autoplay>
     <source src="media/musicvideo.ogv" type="cideo/ogg">
     <source src="media/musicvideo.mp4" type="cideo/mp4">
     <source src="media/musicvideo.webm" type="cideo/webm">
     <track src="media.musicvideo.vtt" srclang="ko" label="korean" default>
</video>

 

• 비디오에 자막이 제대로 표시되는지 확인하려면 서버에 올려 보아야 합니다.

1. 호스팅 서버에 접속한 후 서버에 html 파일과 비디오 파일들, 자막 파일을 모두 업로드 합니다.
2. 대부분의 웹 서버에서는 아직 자막 파일을 인식하지 못합니다. .vtt라는 파일 확장자가 무엇인지 모르기 때문에 서버에게 알려 주어야 하는데 그것을 'MIME type을 추가한다'라고 합니다. 호스팅하고 있는 서버 관리자에게 .vtt text/vtt 과 같이 MIME type을 추가해 달라고 요청하면 간단하기 때문에 바로 처리해 줄 것입니다.
3. MIME type 추가가 끝났다면 서버에 업로드한 html 파일을 각 브라우저에서 열어보아 자막 표시가 되는지 확인하면 됩니다.

 

• 비디오 파일에 자막을 입히다 보면 전문가가 아닌 이상 시간을 정확히 계산해 자막을 작성하기 쉽지 않습니다. 이럴 때 초보자도 쉽게 비디오에 자막을 추가할 수 있는 사이트를 이용하면 도움이 됩니다. 마이크로 소프트에서 제공하는 HTML5 Video Caption Maker 라는 사이트가 그 예입니다.

 

 

참고 : HTML5 + CSS3 웹 표준의 정석