HTML video 태그(HTML5)

HTML 에서 Video tag를 사용하면 video Play를 사용할 수 있다

<video width="400" height="300" controls poster="http://sample.png">
<source src='http://sample.mp4' type='video/mp4' /> Sample Video </video>

 

controls poster="http://sample.png” 부분이 지정되지 않으면 Play하기전 이미지는 아래 그림과 같이 표시 되므로 표시이미지를 지정 해야 한다.

 

비디오 자막 track 태그

<video width="400" height="300" controls>

video width="400" height="300" controls poster="http://sample.png"> <source src='http://sample.mp4' type='video/mp4' />

<track src="http://sample-en.vtt" kind="subtitles" srclang="en" label="English">
<track src="http://sample-ko.vtt" kind="subtitles" srclang="ko" label="Korean" default>

</video>

자막을 정상적으로 사용할 수 있으면 언어선택 버튼이 보인다.

vtt 파일 format

WEBVTT FILE
1 00:00:00.000 --> 00:00:02.000
안녕~
2 00:00:02.000 --> 00:00:04.000
친구들~
3 00:00:05.000 --> 00:00:06.000
The End

곰플레이이 등에서 사용하던 자막 파일 srt는 사용할 수 없다

자막 파일은 vtt format만 인식하는 듯 하다.

srt 파일과의 차이는 크게 없다 그러나 시간을 표시하는 솟수점 부분에 “00,000” 과 “00.000” 같이 콜론과 도트의 차이가 있다.

1
00:00:00,000 --> 00:00:30,037

srt 파일에서 콜론을 찾아서 도트(.)로 바꾸어주고  확장자 srt –> vtt 로변경 하면 vtt파일로 변환된다.