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 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.
Top comments (0)