HTML5 is a very flexible markup language that lets you design your web pages with a lot of freedom – provided you know what to do. With that said, HTML5 video closed captioning does involve a complex process to get right. However, adding subtitles to your videos reaps so many benefits that it’s worth learning to do it in HTML5. With enough time, as long as you know what to add in your markup, adding captions to your videos can be a cakewalk.
Here’s how you can add and customize closed captions for your videos in HTML5:
1. Transcribe your videos
Having a transcript beforehand makes it easier to caption your HTML5 videos later on.
Here’s a simple step-by-step process of creating your transcript:
Open a media player and the word processor of your choice.
Play your video and transcribe each line, including their respective timestamps
If necessary, play the video again and correct any errors in your transcript
2. Save your transcript in the correct file format
With HTML5 videos, the correct file format for captions is WebVTT which requires a specific format to process your captions. The format is:
Start timecode – -> End timecode (hours:minutes:seconds.milliseconds or minutes:seconds.milliseconds if the video is less than an hour long)
Speaker line
Comment; this is optional and cannot be seen by the viewer
Here’s an example:
01:05:30.00 – -> 01:05:40.00
It took the team a couple of months to finish, but it was all worth the effort.
NOTE There is some crosstalk in the background, which is irrelevant to the video.
You must do this for every line in the transcript.
Alternatively, you can use an automated transcription service like FreeTranscriptions! to create your WebVTT caption file quickly and free of charge.
3. Uploading your video and the caption file
In order for your HTML5 code to play the video, you must upload both the video and the caption file you have created to your server.
Keep in mind that some video formats may be incompatible with certain browsers. To avoid this issue, try to upload your video in multiple video formats.
4. Creating the HTML5 markup for subtitles
Before adding the subtitles, your current markup should look like this:
<video id=”video_x” controls=”controls” width=”y” height=”z”><br />
<source src=”video_x.mp4″ type=”video/mp4″ />
</video>
Some of the parameters you need to consider are:
Under the <video> tag
id: Your designated name for your video within the HTML code for easier reference within the HTML code
controls: If present within your <video> tag, it enables the built-in controls of the HTML video player
width and height: The dimensions of the video on the web page
Under the <source> tag
src: The filename of the video you want to embed (must be uploaded on your server)
type: The file extension of your video (e.g., if mp4, must be “video/mp4.”)
To add basic subtitles for your HTML5 video, it must have the <track> tag before your </video>. It should look like this:
<video id=”video_x” controls=”controls” width=”y” height=”z”><br />
<source src=”video_x.mp4″ type=”video/mp4″>
<track label=”English” kind=”subtitles” srclang=”en” src=”video_x_subtitles.vtt”>
</video>
These are the essential <track> parameters you need to know:
label: Name of the track; often, this is the name of the language of the captions
kind: Type of track to be shown, either “subtitles” or “captions”
srclang: Abbreviated language of the track
src: File path of your subtitle track either on your server or in your local drive
Make sure that your .vtt file is uploaded into your server database and that the name designated under the “src” parameter matches exactly the name of your .vtt file.
If you have more than one subtitle file with another language, add another <track> tag with the appropriate parameters.
5. Designing the font style of your HTML5 video subtitles
It’s possible to change the style of your subtitles in HTML5. You simply have to add <style> tag before </video>, and indicate the parameters that you want to change in your font. All HTML5 font parameters are applicable here, so your style options can be quite flexible.
Here are some basic parameters you can try out for starters:
background-color: Color of the background of the subtitles
color: Color of the subtitle font
font-size: Size of the subtitle font
font-family: Font type of the subtitles
opacity: How transparent/solid the track is
For example, if you want your subtitles to be slightly transparent with a light gray Helvetica 16 point font and a gray background, this is what your markup should look like:
<video id=”video_x” controls=”controls” width=”y” height=”z”><br />
<source src=”video_x.mp4″ type=”video/mp4″>
<track label=”English” kind=”subtitles” srclang=”en” src=”video_x_subtitles.vtt”>
<style>
#video_x::cue {
background-color: A9A9A9
color: D3D3D3
font-size: 16px;
font-family: “Helvetica”;
opacity: 0.75;
}
</style>
</video>
Alternatively, you can stick with the default font options for the subtitles in HTML5. To do this, simply add the “default” parameter at the end of your <track> subtitle:
<track label=”English” kind=”subtitles” srclang=”en” src=”video_x_subtitles.vtt” default>
Adding subtitles to your videos in HTML5 is easy, but creating those subtitles from scratch is incredibly tedious. Perhaps you’d like to explore ways to keep the process simple and easy. Consider using a machine transcription service like FreeTranscriptions! for a faster and easier way to create your subtitles.