DEV Community

Cover image for How to Add Captions and Subtitles to HTML5 Videos
Kevin Lewis for Deepgram

Posted on • Originally published at developers.deepgram.com

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:

// 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());
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

A webpage with only a video player visible

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>
Enter fullscreen mode Exit fullscreen mode
  • 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.

A webpage with only a video player visible. The video player has subtitles.

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>
Enter fullscreen mode Exit fullscreen mode

As a final note, if you've not seen Scott's Chili Pepper video which is in the header image for this post - you should. It's hilarious. If you have any questions, please feel free to reach out on Twitter - we're @DeepgramDevs.

Top comments (0)