Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add subtitles in video using Video.js?
In this tutorial, we're going to learn how to add subtitles to a video using the video.js library. Subtitles, often known as captions, are lines of speech or other text that appear at the bottom of the video. Adding subtitles to the video really enhances the video experience for the viewers who are deaf or hard-of-hearing.
Adding subtitles using video.js is very easy and furthermore, video.js allows crossbrowser implementation of the subtitle.
Let's learn how to add subtitles to our video using video.js in the next section of the video.
How to Add Subtitles in Video Using Video.js?
Subtitles, also known as Text tracks, is an HTML5 feature that allows users to view time-triggered text.
Note For creating a timed text track or subtitle file, you need a text file in the webVTT format. Generally, these files have text lines with a specific start time and end time. Once you have a subtitle file ready for your video, you can add it to the video player.
For adding a time-triggered text track to the video.js player, we're going to use the <track> tag. This tag is also going to be children of the <video> element just like the <source> tag.
Example
Use the following code for adding a text track to the video player −
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > <track kind="subtitles" src="https://www.tutorialspoint.com/videos/captions.vtt" srclang="en" label="English" default > </video> <script src="https://www.tutorialspoint.com/videos/video1.mp4"></script> </body> </html>
In the above code snippet, we've created a <video> element using the <video-js> class. Then, we've added the path to the video in the <source> tag.
Below that, <track> tag with 'kind' as 'subtitles' has been used to import the subtitle file. The source language (srclang) for the track is English (en) and the label for this subtitle or audio track will be 'English'. And at last 'default' attribute has been added to the track, which will make sure that this subtitle is selected by default if we use multiple text tracks. Make sure to update the 'src' attribute with the path to your subtitle file.
Since we've understood how to use a track to add subtitles to a video player, now let's have a look at some of the important properties to the <track> tag.
kind − This tag specifies the kind of the text track. The various kinds supported are subtitles, captions, chapters, description, metadata, etc. The difference between a captain and a subtitle is that subtitles are the translation of the dialogue shown in the video while a caption is a transcription of the same dialogue.
label − This tag is responsible for specifying the name of the text track which will be visible to the end user. If you've multiple text tracks, you can give a different label to each one of them.
default − The default property is used to choose the default track which is shown to the user when there are multiple subtitles available.
Now that we've understood how to add a subtitle file to a video player, let's see an example of how to add multiple subtitle tracks to add a video player.
Example
Consider the below example to add multiple subtitle tracks −
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > <track kind="subtitles" src="https://www.tutorialspoint.com/videos/captions.vtt" srclang="en" label="English" default > <track kind="subtitles" src="https://www.tutorialspoint.com/videos/captionsSpa.vtt" srclang="es" label="Spanish" > <track kind="subtitles" src="https://www.tutorialspoint.com/videos/captionsFre.vtt" srclang="fr" label="French" > </video> <script src="https://www.tutorialspoint.com/videos/video1.mp4"></script> </body> </html>
In the above example, you can observe that we've added three subtitle files - English, Spanish and French. All three tracks have their specific labels and path to their files. The languages have been mentioned for each track in the 'srclang' property.
When the above code is executed, the web page will have a video player with three subtitle tracks labeled as English (selected by default), Spanish and French.
Alternatively, we can also add the subtitle tracks programmatically in the <script> tag by passing them in the video.js player options.
var player = videojs('my-video', { tracks: [{ src: 'https://domain/mysub.vtt', kind:'subtitles', srclang: 'en', label: 'English' }] });
In the above snippet, we've added a subtitle track to the video.js player function inside the track attribute. The properties of the track attribute (kind, src, srclang, label) are exactly the same as before.
Multiple Subtitle Tracks
You might have observed that the track attribute is of array type, which means you can pass multiple subtitle tracks to this attribute. Each of the subtitle tracks is a JS object with its specific properties. Consider the below code, for adding multiple text tracks programmatically.
Example
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > </video> <script src="https://www.tutorialspoint.com/videos/video1.mp4"> </script> <script> var player = videojs('my-video', { tracks: [{ src: 'https://www.tutorialspoint.com/videos/captionsEng.vtt', kind:'subtitles', srclang: 'en', label: 'English' },{ src: 'https://www.tutorialspoint.com/videos/captionsSpa.vtt', kind:'subtitles', srclang: 'es', label: 'Spanish' }, { src: 'https://www.tutorialspoint.com/videos/captionsFre.vtt', kind:'subtitles', srclang: 'fr', label: 'French' }] }); </script> </body> </html>
When the above code is executed, a video player will be created in the webpage with 3 subtitle tracks labelled as English, Spanish, and French, respectively.
Note − Make sure to update the source to the video and subtitle tracks with your video and subtitle files.
Conclusion
In this tutorial, we learned how to add subtitle tracks to our video created using video.js. We also had a look at the ways to add subtitles text tracks to videos − using the <track> tag and programmatically inside the <script> tags with the help of working HTML code examples for each one of those.
4K+ Views
