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>

image

 

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

image

 

비디오 자막 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>

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

image

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 만 인식하는 듯 하다.

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

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

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

“HTML video 태그(HTML5)”의 8개의 댓글

  1. I was pretty pleased to discover this website. I wanted to
    thank you for ones time for this particularly fantastic read!!
    I definitely enjoyed every little bit of it and I have you saved as a
    favorite to look at new stuff on your web site.

  2. Hi! This is kind of off topic but I need some advice from
    an established blog. Is it hard to set up your own blog? I’m not
    very techincal but I can figure things out pretty fast. I’m thinking about making my own but I’m not sure
    where to begin. Do you have any points or suggestions? Many thanks

  3. Hello There. I found your blog using msn. This
    is a very well written article. I will be sure to bookmark it and
    come back to read more of your useful info. Thanks for the post.
    I will certainly return.

  4. Hi there, i read your blog from time to time and i own a similar one and i was just wondering if you get a lot of spam responses?
    If so how do you prevent it, any plugin or anything you can suggest?
    I get so much lately it’s driving me mad
    so any support is very much appreciated.

댓글 남기기