I tried using the track element, but it didn't work..could you please tell me if there's something I am doing wrong?
<video controls="controls" width="450"> <source src="A taste of TED.mp4" type="video/mp4"> <track src="TED.vtt" kind="subtitles" srclang="en" label="English"> </video> The subtitle file (TED.vtt) looks like this:
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 4 Answers
The code:
<video controls="controls" width="450"> <source src="A taste of TED.mp4" type="video/mp4" /> <track src="TED.vtt" kind="subtitles" srclang="en" label="English" /> </video> Works. What you may be doing wrong is that you are using .srt subtitles instead of .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. What you need to do is:
- Start the text file with WEBVTT
- Remove the cue markers at the start of each subtitle, or replace them with Cue - prefixes.
- Optionally, remove the 00: hour marker at the start of each timestamp.
- Convert the comma before the millisecond mark in every timestamp to a decimal point (easy enough with a find-replace: ,7 to .7, for example).
- Optionally, add styling markup to the subtitle text.
- Save the file with a .vtt extension and link to it from a element in an HTML5 page.
Also it may be possible that your web bowser does not support the video tag, I know for example that some cellphones do not play videos with this tag!
- The second part of the answer was taken from a post by Dudley Storey.
I also had the same problem when I have hosted my site in IIS. The issue was, I hadn't added the MIME type of vtt file under supported MIME types of the site. Just click on the site and add .vtt extension with MIME type text/vtt under the supported MIME types. It worked for me.
If this is not added a 404 not found error will be logged in the error console when searching for the subtitle file.
Adding captions and subtitles to HTML5 video
<video controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"> </video> <video controls="controls" width="450"> <source src="A taste of TED.mp4" type="video/mp4" /> <track src="TED.vtt" kind="subtitles" srclang="en" label="English" /> </video> 
