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:
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:
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:
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:
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:
Unlock language AI at scale with an API call.
Get conversational intelligence with transcription and understanding on the world's best speech AI platform.