Programming/HTML CSS
1. track 사용
<video width="200px" class="video-js vjs-default-skin" data-setup="{}" controls="controls">
 <source src="sample.mp4" type="video/mp4" />

 <track kind="subtitles" src="track.srt" srclang="ko" label="korean" />
 <track kind="subtitles" src="track.srt" srclang="en" label="english" />
</video>
▶ track tag는 video tag를 통해 영상을 재생할때 자막을 보여줄 수 있도록 하는 tag입니다. track tag를 통해 자막을 보여주려면 아래와 같은 format으로 이루어진 자막 file을 제공해야 합니다.

1
00:00:000,000 --> 00:00:05,000
<p>안녕하세요.</p>

2
00:00:07,000 --> 00:00:10,000
<h2>반갑습니다.</h2>

첫번째 행의 숫자는 자막번호를 의미하며 두번째 시간은 자막을 표시할 시간입니다. 세번째 행에 실제 보여줄 자막을 넣고 마지막 4번째 행에 빈줄을 하나 추가하는 형식으로 자막을 만들면 됩니다.

여러 언어로된 자막을 제공하는 경우 해당 언어별로 track tag를 다중적으로 사용할 수 있습니다. 자막 file의 확장자는 srt 이며 srt 는 HTML5의 자막 file 확장자를 의미합니다.

track tag를 지원하는 browser가 많지 않습니다만 video.js plug-in을 사용하면 어느정도 문제를 해결할 수 있습니다.

2. track 속성

(1) kind

이 속성은 subtitles가 기본값이며 일반적인 자막을 영상에 보여준다는 의미합니다.

captions 값으로 설정하는 경우는 영상이 음소거상태이거나 영상을 보는 대상이 청각장애등인 경우 등등.. 소리를 들을 수 없는 경우에 자막과는 별도로 영상을 이해하기 위한 여러 음향효과를 보여준다는 것을 의미하게 됩니다.

descriptions은 영상에 대한 설명을 별도의 음성 file로 제공하는 경우에 사용됩니다. 영상을 보는 대상이 시각장애등의 이유로 영상을 제대로 볼 수 없는 경우를 대비합니다.

(2) src

자막파일의 url 경로를 지정합니다. 자막 파일의 확장자는 srt입니다.

(3) srclang

자막파일을 언어별로 제공하는 경우 해당 자막파일의 언어를 지정하도록 합니다.

(4) label

자막파일을 언어별로 제공하는 경우 사용자가 플레이어에서 해당 언어를 선택할때 표시할 내용을 입력합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
0 0