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
srcattribute is a filepath. This assumes the file is in the same directory as the HTML file. labelis shown to the user when selecting which subtitles they want to see.kindspecifies the type of track. We're choosingsubtitlesas these generally just contain spoken words, whilecaptionsinclude other important background sounds.srclangspecifies the language of the file.defaultis 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
defaultattribute. 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>Learn more about Deepgram
Sign up for a Deepgram account and get $200 in Free Credit (up to 45,000 minutes), absolutely free. No credit card needed!
We encourage you to explore Deepgram by checking out the following resources: