Adding Captions to Videos
5
Explanation of how to add caption tracks to HTML5 videos in Scalar.
plain
2025-02-25T08:57:08-08:00
Scalar enables you to add captions to HTML5 videos using the WebVTT format, a standard for time-based captions. By providing the URL to a WebVTT file you provide, you can make your captions available within the video player shown in Scalar, providing greater accessibility. Note that the file must be hosted on a server you control and cannot currently be uploaded from within Scalar — if you have FTP access to the server you are working on, one approach would be to manually upload the file to the media folder of the book you are editing.
To link your WebVTT file(s), you will need to add one or more dcterms:relation metadata properties to your HTML5 video media in Scalar. To do this, navigate to the media file in your project and click the Edit (pencil) button in the toolbar. Click the Metadata tab, and then click “Add additional metadata”. Select the Dublin Core field set, and then check the box for “relation”. This will add a slot for the new metadata.
You have two options for what to enter in the new dcterms:relation field:
The simplest approach is to add the URL to your WebVTT file and then click “Save and view”. This will cause Scalar to attempt to attach the file as a caption track whenever the video is loaded (check the video controls for a captions menu that will let you access the track).
A more comprehensive approach involves pasting a bit of JSON data into the field that provides information about the title and content of the track, in this format (shown with explanatory comments on the right, which should not be included in your final data):
{
"src": "captions.vtt", // URL to WebVTT file
"label": "English", // display title of the track
"kind": "captions", // can also be "subtitles"
"srclang": "en-us", // language code
"default": true // use this track as the default
}
After saving your edits, you will be returned to the media page for your video, where you can check whether the WebVTT track(s) were added by looking for the captions menu in the video controls and seeing whether it indicates any additional tracks.
