웹 브라우저에서 영상에 자막파일을 등록하는 것을 해보자. 자막파일하면 smi나 srt 파일이 유명한데 vtt파일도 비중이 높아 지고 있다고 한다.
간단히 예제 파일을 만들어 보자.
----- index.html -----
<video src="../javascript/videos/Mountains - 7418.mp4" autoplay loop controls>
<track src="subtitle.kr.vtt" kind="subtitles" srclang="kr" label="기본한국어" default>
<track src="subtitle.en.vtt" kind="subtitles" srclang="en" label="영어자막">
Sorry, your browser doesn't support embedded videos
</video>
------------------
---- subtitle.vtt -----------
WEBVTT - Translation of that film I like
NOTE
이것은 주석 부분입니다. 화면에 표시 되지 않아요.
00:00:01.000 --> 00:00:04.000 line:-3
<b>이 예제는 영상에 자막을 추가하는 연습입니다.</b>
이렇게 태그를 직접 적용 할 수 있습니다.
00:00:05.000 --> 00:00:06.500 position:10% align:start size:100%
<u><i>아름다운 풍경을 감상해 보세요. 위치나 크기도 조절이 가능해요.</i></u>
NOTE 이건 안되는데?
00:00:07.000 --> 00:00:08.000 line:-3
<c.captionstyle>따로 스타일을 지정할 수도 있습니다.</c>
00:00:09.000 --> 00:00:11.000 line:-3
그런데 이렇게 텍스트를 편집하는 방법으로 일일히 만들기는 힘들어요.
00:00:13.000 --> 00:00:14.000 line:-3
- 감사합니다.
-----------
영상과 자막파일을 서버에 업로드 하고 접소개 보면 된다. 데모 사이트에서 확인해 보자.
데모사이트 : http://visualssing.dothome.co.kr/temp/videocaption.html
