How to Add Captions and Subtitles to HTML5 Videos
Kevin Lewis
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>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 .
