How to Add Captions and Subtitles to HTML5 Videos

Generating Transcriptions
Set Up a Video Player
Add Subtitles
Learn more about Deepgram

Share this guide

By Kevin Lewis

Deepgram Alum

Last Updated

Jun 13, 2024

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:

// npm install @deepgram/sdk

const fs = require('fs')
const { Deepgram } = require('@deepgram/sdk')
const deepgram = new Deepgram('YOUR_DEEPGRAM_API_KEY')

const fileSource = {
    stream: fs.createReadStream('./video.mp4'),
    mimetype: 'video/mp4',
}

deepgram.transcription.preRecorded(fileSource, {
    punctuate: true,
    utterances: true
}).then(result => {
    fs.writeFileSync('captions-en.vtt', result.toWebVTT());
})

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:

<!DOCTYPE html>
<html>
    <body>
        <video controls width="500px">
            <source type="video/mp4" src="video.mp4" >
       </video>
    </body>
</html>

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:

<track src="captions-en.vtt" label="English" kind="subtitles" srclang="en" default>

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:

<video controls width="500px">
    <source type="video/mp4" src="video.mp4" >
    <track src="captions-en.vtt" label="English" kind="subtitles" srclang="en" default >
    <track src="captions-fr.vtt" label="French" kind="subtitles" srclang="fr" >
</video>