<track>태그- 동영상 화면에 자막 추가하기
-웹 표준 마크업인 HTML5에서는 비디오 콘텐츠를 웹 페이지에 삽입할 때 청각 장애인을 위한 자막을 표시하는 것이 기본입니다. HTML5에서는 <track>태그를 ㅣㅇ용해서 외부 자막 파일을 연결할 수 있습니다.
EX)<track kind="자막의 종류" src="파일 경로" srclang="사용한 언어" lable="제목" default>
예를들어, 한글로 된 자막 내용이 wildlife.vtt파일에 있고 한국어를 기본 언어로 설정하고 싶다면 다음과 같이
ex)<track kind="subtotles" src=wildlife.vtt" lang="ko" lable="korean" default>
이와같이 설정하면 된다
<track>태그의 속성
1.kind: 자막의 종류를 지정 사용할수있는 값은 아래와 같고 생략할 경우 subtitles로 간주한다
kind의 속성값
1-(1) subtitles:자막,소리를 사용할 수 있지만 이해할 수 없는 경우 한 언어에서 다른 언어로 번역한 자막일 경우 사용 화면에 표시.
1-(2) captions:캡션. 청각 장애인을 위한 자막이거나 소리를 들을 수 없거나 사용할 수 없는 상황을 위함 화면에 표시.
1-(3) descriptions:동영상 콘텐츠에 대한 설명. 동영상 화면에 표시되지 X
1-(4) chapters:동영상 탐색을 위한 장 제목. 동영상 화면에 표시되지 X
1-(5)metadata: 동영상 컨텐츠의 비시각 정보. 동영상 화면에 표시되지 X
%실제로 subtitles과 captions는 크게 구분하지 않고 사용
2.src:자막 텍스트 파일 경로를 지정
3.srclang:사용한 언어를 지정 kind가 subtitle이라면 반드시 지정해야 하는데 en이나 ko처럼 언어를 나타내는 약자로 표기
4.label:자막이 어러 개일 경우 자막을 서로 식별할 수 있게 해주는 제목
5.default:자막 파일이 여러 개일 경우 기번으로 사용할 자막을 default로 지정할 수 있다.
WebVTT자막 파일
-영화나 드라마를 재생할 때 함께 사용하는 자막 파일은 smi파일이나 srt파일이다
smi:자막 내용만 들어 있다
srt:자막의 시작 시간과 끝 시간과 같은 시간 정보가 함께 들어있다.
HTML5에서 srt파일을 사용하기도 하지만 모든 브라우저에서 공식적으로 지원하는 자막 파일 형식은 WebVTT 형식이다.
WebVTT:파일 확장자는 .vtt이고 파일 안에 시간 정보를 가지고 있다 간단히 vtt파일. 메모장이나 노트패드++같은 편집기에 입력후 .vtt로 저장해서 사용하면 된다.
ex)자막의 시작시간과 끝 시간 "HH:MM:SS.ttt"형식으로 표현 tt는 밀리초 시작 시간과 끝 시간 사이에는 "ㅡㅡ>"기호를 넣어 시간이 흘렀다고 표시. 자막 내용은 한줄 이상으로 입력 가능.
하나의 자막이 끝나면 빈줄을 넣어 자막이 끝났음을 알려준 후 다음 자막으로 넘어간다.
215p참고.
--------------------- 비디오 캡션 메이커로 자막 파일 쉽게 만들기-------------------------
https://dev.modern.ie/testdrive/demos/captionmaker
218p참고