How to Add Captions and Subtitles to HTML5 Videos

Generating accurate transcripts is often just the start of a journey. Learn how to use Deepgram's best-in-class transcriptions in HTML <video> elements.

Generating Transcriptions

To add subtitles to a HTML <video> element requires a WebVTT file. We previously wrote about generating WebVTT captions with Node.js. Assuming you have an MP4 video to transcribe, you can use this snippet to generate a subtitles file:

You will need to replace YOUR_DEEPGRAM_API_KEY with a valid key which you can get for free here.

Set Up a Video Player

Create an index.html page:

Load the webpage, and you should see a video player.

Add Subtitles

Inside of the <video> tag add a <track> element to represent the caption file:

• The src attribute is a filepath. This assumes the file is in the same directory as the HTML file.

• label is shown to the user when selecting which subtitles they want to see.

• kind specifies the type of track. We're choosing subtitles as these generally just contain spoken words, while captions include other important background sounds.

• srclang specifies the language of the file.

• default is honored by Safari, while Chromium-based browsers will try and select a captions file based on the browser's language setting.

• 

  

• You can add as many subtitle tracks as you want, but only one can have the default attribute. For example:

Learn more about Deepgram

Sign up for a Deepgram account and get $200 in Free Credit (up to 45,000 minutes), absolutely free. No credit card needed!

We encourage you to explore Deepgram by checking out the following resources:

1. Deepgram API Playground 

2. Deepgram Documentation

3. Deepgram Starter Apps