html로 비디오에 자막을 추가하는 방법은 무엇입니까?

Question

track 요소를 사용해 보았지만 작동하지 않았습니다 ... 제가 잘못하고있는 것이 있는지 알려주실 수 있습니까?

는

<video controls="controls" id="video1" width="450"> 
    <source src="A taste of TED.mp4" type="video/mp4"> 
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English"> 
</video> 

자막 파일 (TED.vtt)은 다음과 같습니다

WEBVTT 

1 
00:00:01.000 --> 00:00:10.000 
This is the first line of text, displaying from 1-10 seconds 

2 
00:00:15.000 --> 00:00:20.000 
And the second line of text 
separated over two lines 

Answer 1

<video controls="controls" id="video1" width="450"> 
    <source src="A taste of TED.mp4" type="video/mp4" /> 
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English" /> 
</video> 

Answer 2

코드 :

<video controls="controls" id="video1" width="450"> 
    <source src="A taste of TED.mp4" type="video/mp4" /> 
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English" /> 
</video> 

작품. 당신이 잘못하고 될 수있다 당신이 .srt 자막 대신 .vtt

를 사용하고 있다는 점이다 SRT :

1 
00:01:21,700 --> 00:01:24,675 
Life on the road is something 
I was raised to embrace. 

VTT :

WEBVTT 

01:21.700 --> 01:24.675 
Life on the road is something 
I was <i>raised</i> to embrace. 

당신이해야 할 것은 :

• WEBVTT로 텍스트 파일 시작
• 각 자막 시작 부분에서 큐 마커를 제거하거나 큐 프레 픽스로 교체하십시오.
• 선택적으로 각 시간 소인의 시작 부분에 00 : 시간 마커를 제거하십시오.
• 모든 타임 스탬프의 밀리 초 표시 앞에있는 쉼표를 소수점으로 변환하십시오 (예 : find-replace :, 7에서 .7 등으로 쉽게 시작할 수 있음).
• 선택적으로, 자막 텍스트에 스타일 마크 업을 추가하십시오.
• 확장자가 .vtt 인 파일을 HTML5 페이지의 요소에서 링크로 저장하십시오.

또한 웹 배너가 비디오 태그를 지원하지 않을 수도 있습니다. 예를 들어 일부 휴대 전화는이 태그로 동영상을 재생하지 못합니다.

• 답변의 두 번째 부분은 Dudley Storey가 a post에서 가져 왔습니다.