Skip to content

How to Add Captions and Subtitles to HTML5 Videos

RevBlogResourcesHow to Add Captions and Subtitles to HTML5 Videos

HTML5 provides flexibility for people to deliver content to audiences online. If you’re a video creator, HTML5 allows you to add subtitles and captions to your videos with relative ease.

In this article, you’ll learn how to add captions and subtitles to HTML5 videos.

Prepare the Video and Caption Files for HTML5

To get started, upload the video and captions files to your website or webserver.

1. Upload Video for HTML5

Some browsers don’t play certain videos in HTML5 because it can’t read the codec or file type. To make sure that the video plays in most browsers, you need to add a couple of video file formats with different tags.

Other than .mp4, you should add a .webm version of your video. You can use a tool like Convertio to create a .webm copy of your .mp4 video.

2. Upload Captions for HTML5

The correct file format of the subtitle or caption data is Web Video Text Tracks or WebVTT.

If you don’t have the subtitles or captions for your video in WebVTT format, order subtitles and captions from Rev. In Rev’s captions editor, you can export your captions and subtitles in WebVTT, SRT, and many other formats to use across the web, at no additional charge.

Prepare the HTML5 Markup

1. Create the HTML markup for the videos

First, we want to create the HTML markup for the MP4 video:

 

<video id="sample_video" controls="controls" width="800" height="600"><br />
<source src="sample_video.mp4" type="video/mp4" />
</video>

 

In the markup above, there are two tags: <video> and <source>.

The former defines the characteristics of the video file when played online. The latter finds where the browser can find the video on your local drive or online.

For the width and height attributes of the video, feel free to enter the dimensions you’re most comfortable with.

Add the additional .webm format of the video with this tag:

 

<video id="my-video-stream" width="800" height="600" controls>
<source src="sample_video.mp4" type="video/mp4">
<source src="sample_video.webm" type="video/webm">
</video>

 

2. Create the HTML markup for the subtitles

Now, for showing the subtitles and captions onto the video, you will be using the <track> tag on HTML.

We will discuss the different attributes later to help you understand the purpose of each and properly label the information of your video.

Let’s assume that you want to show the English subtitles on the video. Here’s the HTML markup with the added :

 

<video id="sample_video" width="800" height="600" controls>
<source src="sample_video.mp4" type="video/mp4">
<source src="sample_video.webm" type="video/webm">
<track label="English" kind="subtitles" srclang="en" src="REV_TRANSCRIPTION_V3.vtt" default>
</video>

 

Whereas:

  • label – title of the track
  • kind – type of the text track (subtitles or captions)
  • src – path of the file in your local drive or online
  • srclang – language of the track

 

Upload the markup, video, and subtitles to the same hosting. Ideally, save them in the same folder to make things less complicated for you.

Make sure that the file sources are correct in the markup. If not, then the video won’t play or the subtitles and captions won’t appear.

If the markup works, you can turn on the subtitles by clicking on the three-dot icon.

 

How to Add Captions and Subtitles to HTML5 Video

 

You can add more tracks if you have subtitles and captures of the video in another language by creating another tag on the next line.

Here’s what the markup would look like if you have English and Spanish subtitles of the video:

 

<video id="sample_video" width="800" height="600" controls>
<source src="sample_video.mp4" type="video/mp4">
<source src="sample_video.webm" type="video/webm">
<track label="English" kind="subtitles" srclang="en" src="REV_TRANSCRIPTION_V3.vtt" default>
<track label="Español" kind="subtitles" srclang="es" src="REV_TRANSCRIPTION_FINAL.es.vtt">
</video>

 

To toggle the subtitles, click on the three-dot icon and choose Captions.

How to Add Captions and Subtitles to HTML5 Video

How to Change Style of HTML5 Video Subtitles

If you’re not happy with how your subtitles look, you can change their appearance using CSS.

In the file where you place the HTML markup, you must add the <style> tag before the </video> tag. This is where you can customize the appearance of the subtitles and captions.

Next, enter the pound sign and the video id followed by the ::cue pseudo-element. It lets you target specific texts to style in your subtitles and captions.

 

From here, you enter the following attributes and customize accordingly:

  • background (shorthand properties only, i.e. background-color, background-image, etc.)
  • font
  • outline (shorthand properties only, i.e. outline-style, outline-color, etc.)
  • color
  • visibility
  • opacity
  • white-space
  • text-decoration
  • text-shadow

 

For example, you want the subtitles to have a light green background and pink text with a darker pink outline. Here’s its markup:

 

<style>
#sample_video::cue {
background-color: #D3FFC0;
color: #FFC0CB;
outline-style: solid;
outline-color: #FF5D7A;
font-size: 32px;
font-family: "Times New Roman", cursive;
}
</style>

 

Again, the markup above should appear before the </video> tag.

The subtitles should look like this:

 

How to Add Captions and Subtitles to HTML5 Video

 

For font-family, you must use web safe fonts to help make your subtitles legible.

While using a unique font will help set your subtitles apart, not all browsers may support your chosen font. Therefore, it’s best to choose the ones that are readily available on all browsers.

 

Test Browser Compatibility

Before moving forward, make sure that the subtitles appear correctly on all browsers if possible. You don’t want your video to show subtitles with incorrect styles.

The screenshots above show the video and subtitles from Google Chrome. Below are images of the video and how they look like in their respective browsers.

 

Google Chrome

How to Add Captions and Subtitles to HTML5 Video

 

Apple Safari

How to Add Captions and Subtitles to HTML5 Video

 

Mozilla Firefox

How to Add Captions and Subtitles to HTML5 Video

Opera

How to Add Captions and Subtitles to HTML5 Video

Microsoft Edge

How to Add Captions and Subtitles to HTML5 Video

 

 

Get WebVTT Subtitles for HTML5 Videos

Order your captions and subtitles from Rev and get WebVTT, SRT, and multiple captions formats to use across the web at no additional charge.