MetaSlider Pro has a feature that allows you to add captions to videos hosted inside WordPress and videos hosted externally. In this guide, I’ll give you some helpful background to show how video captions work and what you need to know when adding them to your videos.
Types of Video Caption: SRT or VTT?
To add captions to a video, you always start with a file that contains the caption text.
There are dozens and dozens of formats available for captions. The two most popular formats are VTT and SRT:
- SRT is short for “SubRip Subtitle format”. SRT is the older format and dates back to the year 2000 when people copied DVDs and wanted to extract the subtitles.
- VTT is short for “Web Video Text Tracks” and sometimes it is also called WebVTT. This format was first created in 2010 and is designed for HTML5. This allows you to style the fonts, move them around the video, and edit the subtitles freely.
Both SRT and VTT are valid options for video captions. GetSubly has a detailed comparison between the two formats.
MetaSlider uses the VTT format because we first chose to use the Video.js library to power the video player in our plugin. Click here to see all the details for how Video.js uses VTT captions.
GetSubly shared this screenshot, which is a good example of the VTT file format. There are a good number of free and paid tools available online to help you create a VTT file in this format. Here’s a helpful guide to what a VTT file must contain.
Video Caption Settings in MetaSlider
In the MetaSlider Pro admin area, click the “Text track” tab on your Local Video Slide. There are four settings available:
- Source: This will be the URL for your VTT file.
- Language label: This is the label users will click on to activate captions.
- Language kind: There are four different types of VTT file supported in MetaSlider:
- Language code: This is a 2-letter code. Click here to find the code for your language.
Captions, Chapters, Descriptions, or Subtitles?
Mozilla has a very detailed overview of the settings available for VTT files. MetaSlider supports four different types of text for your videos:
- Captions: This is the default choice that most people should use. This type is designed for transcriptions of the dialogue, sound effects, musical cues, and other audio information. The captions are shown over the video.
- Chapters: These are chapter titles that are used to create navigation within the video. Typically, these are in the form of a list of chapters that the viewer can use to navigate the video.
- Descriptions: These are text descriptions of the action in the content for when the video portion isn’t available or because the viewer is blind or not using a screen. Descriptions are read by a screen reader or turned into a separate audio track.
- Subtitles: These are translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
This next screenshot shows an example of the “Captions” option. This VTT starts this way:
WEBVTT 00:01.000 --> 00:04.000 - Let's create some WordPress videos 00:05.000 --> 00:09.000 - It's the best way to build a website
This next screenshot shows an example of the “Chapters” option. This video is currently in Chapter 1, called “Opening Credits”. The visitor can trigger the chapter navigation using the toolbar below the video. This VTT file starts this way:
WEBVTT 1 00:00:00.000 --> 00:01:42.000 I. Opening credits 2 00:01:42.500 --> 00:04:44.000 II. A dangerous quest
This next screenshot shows an example of the “Descriptions” option. The visitor can enable the descriptions using the toolbar below the video. The file format is the same as for “Captions”, but you choose the “Descriptions” setting in the MetaSlider admin area.
Finally, the “Subtitles” option appears identical in every way to the “Captions” option. However, the text should be a translation of the original video. In this screenshot, the subtitles are in Portuguese, although the video is in English.
More on Video Captions in MetaSlider
MetaSlider allows you to create slideshows using Local Video Slides and External Video Slides. The process of adding captions to the videos is slightly different for the two slide types: here’s the guide to captions for local videos and here’s the guide to captions for external videos.