Below is the html for adding WebVTT Closed Captions to this video.
<!DOCTYPE html> <html> <video width="796" height="597" controls> <source src="VIDEO_URL/VideoCaptioned.mp4" type="video/mp4" /> <track src="VideoCaptioned.vtt" kind="captions" label="Closed Captions" srclang="en" type="text/vtt" /> </video> </html>
Above is the html code for displaying an mp4 video with WebVTT Closed Captions. The user will be able to turn Closed Captions on or off as they see fit.
For an example of html5 video with Closed Captions, you can visit http://mark-sweeney.com/Video/ to see a scene from George Romero’s “Night of the Living Dead.”
Breaking down the important bits of the code:
or it won’t work in Windows 8.
<video width="796" height="597" controls>
Sets the width and height of the dimensions of your video. Change these to match your video. “controls” is gives the user the little bar at the bottom of the video with all the video controls, including the Closed Caption [CC] button.
<source src="VIDEO_URL/VideoCaptioned.mp4" type="video/mp4" />
VIDEO_URL/VideoCaptioned.mp4 – This is the URL address where your video is stored. This tells the browser where the file is, and what kind it is. Your WebVTT text file should also be in the same folder as the video. This way, all you need is the name of the video file and its extension, rather than an entire URL.
Your WebVTT text file should also have the same name as your video. “My-Video.mp4” and “My-captions.vtt” won’t work. The file names for the video and the WebVTT files need to be the same, just with different extensions (“.mp4”, and “.vtt”).” Don’t forget, file names can’t have spaces in html, or links to them won’t work.
This tells your browser what kind of captions they are – captions, subtitles, descriptions, chapters and metadata are they are.
Subtitles are different that captions. Captions often include sounds heard, such as “Phone rings”, or “thunder” etc. Subtitles are usually just dialogue, and you can have several subtitles in different languages. In this case, we’re using captions.
Label is how the captions track name shows up when the user clicks the Closed Captioned [CC] button.
This adds “(English)” after the “Closed Captions” label.
Type tells most browsers what kind of file to expect. Most of them can use this, but Windows 8 needs more attention.
For WebVTT to work in Windows 8, you need to upload a special text file with the name “.htaccess” (without the quotation marks) to the root folder of your server.
In that text file, you need one line of text:
AddType text/vtt .vtt
This allows Windows 8 to read the .vtt text file properly. Otherwise, the video will show options for Closed Captions, but not the captions themselves.
More information on how to create the .htaccess file on PC or Mac can be found here: http://wiki.dreamhost.com/Htaccess
The .htaccess should be in the root folder of your domain. If it is in a subfolder, it will only affect the contents of that folder.