How to Add Captions and Subtitles to HTML5 Videos
Tags: html, beginners, transcripts
Published: 2022-07-28 08:51:30

---
title: How to Add Captions and Subtitles to HTML5 Videos
published: true
description: 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.
tags: html ,beginners, transcripts
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqsmonli15h4p06j4yb7.png
canonical_url: https://developers.deepgram.com/blog/2022/07/adding-subtitles-to-html-video-element/
---

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](https://developers.deepgram.com/blog/2021/11/generate-webvtt-srt-captions-nodejs/). Assuming you have an MP4 video to transcribe, you can use this snippet to generate a subtitles file:

```js
// 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](https://console.deepgram.com).

## Set Up a Video Player

Create an `index.html` page:

```html
<!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.

![A webpage with only a video player visible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09gew8rzaec8fux4rjpj.png)
 

## Add Subtitles

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

```html
<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.

![A webpage with only a video player visible. The video player has subtitles.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey0yi2pu9b64ge9gmuim.png)
 

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

```html
<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>
```

As a final note, if you've not seen [Scott's Chili Pepper video](https://deepgram.com/blog/chili-pepper/) 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](https://twitter.com/DeepgramDevs).