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>
        <video controls width="500px">
            <source type="video/mp4" src="video.mp4" >

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" >
  • 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.

    If you have any feedback about this post, or anything else around Deepgram, we'd love to hear from you. Please let us know in our GitHub discussions .

Related Articles

Unlock language AI at scale with an API call.

Get conversational intelligence with transcription and understanding on the world's best speech AI platform.

Sign Up FreeBook a Demo
Essential Building Blocks for Language AI