HTML5 Coding Essentials and Best Practices

Adding subtitles to a video

Let's look at a simple example. First, you need a video encoded using one of the formats (or codecs) supported by the browsers you target. A recommended format/codec is mp4/H264, but other formats, such as webm, may have some advantages if the browser supports them. For example, webm allows the video to start playing after a much shorter buffering time. In other words, try if possible to provide the video encoded with more than one codec.

For this, use any sort of open source, free or commercial video encoding software, such as Handbrake (free, open source) or Super (free). There are also online video encoding services, and you can even upload your video to YouTube, let it encode your video in several resolutions and codecs, and use a browser extension such as Video DownloadHelper (for Firefox) or JDownloader, to download the video in your chosen formats.

So, let's suppose you have a video like the one below (we included it on YouTube for practical reasons). This video has subtitles (you can activate them in the YouTube player), but the goal of this lesson is to explain how we made them without using the YouTube embedded tools, which do not allow the subtitle file to be exported in the webVTT format.

And if you've also got it in mp4/H264 and in webm formats, here is how you can embed it in your page using the video element:

<source

src="videos/SameOldSongAndDanceRogerLathaudPart1MidRes.mp4"

type="video/mp4">

<source

src="videos/SameOldSongAndDanceRogerLathaudPart1MidRes.webm"

type="video/webm">

<track src="videos/subtitles.vtt"

kind="subtitles" srclang="en" default>

</video>

At line 9, we added a <track> element to add English subtitles, as the guitar teacher there is speaking in French. We will now explain how we created this subtitle track.

Adding subtitles to the video

Now, we need to create a WebVTT file for this video. How can we synchronize an English translation of what the guitar teacher says in French?

Many tools - both free and commercial - are available to add subtitles to a video. Most are native applications you need to install on your computer. However, a free and very practical tool is available for doing this 100% in a Web browser: amara.

Go to the above Web site, click on the "subtitle a video" link, then follow the different tutorials/instructions. It will ask for a YouTube URL, so it's better to first upload your video to YouTube (even in private mode). Once you have entered the URL of your video, you will have an online subtitles/caption editor. Enter your subtitles and sync them until you are happy with the results.

Once your subtitles/captions are ok, you will be able to upload them to YouTube, or -this is what we wanted first- download them as WebVTT format:

Note that YouTube can also help you "make subtitles" with its speech recognition tool, but you will only be able to export in .srt format afterwards. You will have to convert this format afterwards to .vtt.

Try your subtitled/captioned video

Page updated

Google Sites

Report abuse