Video subtitles

Subtitles are a useful tool for video ad's to reach their full potential and generate more impressions, even when muted.

There are two options for adding subtitles to a video ad.

!important this manual is written for the Video Player  and our Custom Controls. If you use a generic HTML video player, you can still add the subtitles directly into the HTML. See here for more information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

1. Add the subtitles before exporting your video.

Most video editing/exporting programs give you the option to add subtitles to a video file. This option requires more work during the creation of the video but less work to edit our templates.

2. Add the subtitles to our video player.

This options requires some coding, but it’s fairly easy and highly customizable.

A .VTT file is used to manually add subtitles to a video. This is a text file with the subtitles placed based on timestamps. For example:

00:00:00.160 --> 00:00:02.219
This is your first subtitle

The sentence ‘This is your first subtitle’ will show from 00:00:00.160 till 00:00:02.219. After 00:00:02.219 the subtitle will disappear, regardless of whether a new subtitle is defined or not.

The .VTT file can be created manually, but there are online tools for this as well. We’ve had good results with fluen.ai, a tool that uses AI to generate, edit, and also translate subtitles. Just load in the video and it will generate a .VTT file. Since this is an automatic process, make sure to check if the subtitles are synced with the video!

If you prefer to make your own subtitles you can find out more about VTT here: https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API

The next step is to add the subtitles to the Weborama video player. Make sure your creation is using the Weborama video player. Otherwise you need to add it to your creation. More information about our video player can be found via this link: Video Player.

To add the subtitles you need to create a global variable called track and place the following code into the function where the video player is initiated:

videoElement.addEventListener("loadedmetadata", function () {
  track = document.createElement("track"); //this creates the track settings
  track.kind = "captions"; //the track used
  track.label = "Dutch"; //language label
  track.srclang = "nl-nl"; //language
  track.src = "video-NL.vtt";  //source file
  videoElement.appendChild(track); //placing the tracks
  track.mode = "showing"; //default is hidden so this setting is mandatory
  videoElement.textTracks[0].mode = "showing"; //necessary for Firefox
});

Since the track is loaded when the video player loads it is automatically synced to the video start.

!important: make sure to check if the timing of the subtitles is correct for the video

The subtitles have a basic style by default – white text on a darker background. You can change this in the CSS by calling ::cue.
We recommend using the following settings:

::cue {   
  font-size: 18px;
  background-color: rgb(77, 75, 75);
  color: white;
  line-height: 22px !important
}

Feel free to alter this to fit your own creation. More styling options can be found here: https://w3c.github.io/webvtt/#the-cue-pseudo-element

Some notes:

• There are options to differentiate the ‘voices’ in the subtitles with the styling. This is done by placing <v identifier> before the text line in the VTT file, and calling ::cue(v[voice="identifier"]) in the CSS.
  However identifiers don’t work on Firefox and use the standard styling as a fallback.
  As example, subtitle in the .VTT file could look like this:
  

  00:00:05.369 --> 00:00:08.939 
  <v one> 1his is subtitle 1
  <v two> This is subtitle 2.

  Both these subtitles are shown at the same time. In the CSS file, you would have:
  

  /* This is the default and fallback information */
  ::cue {
    font-size: 18px;
    background-color: rgb(77, 75, 75);
    color: white; 
    line-height: 22px !important;
  }
  
  /* This is v one */
  ::cue(v[voice="one"]) {
    color: #fff;
    background: #0095dd;
  }
  
  /* This is v two */
  ::cue(v[voice="two"]) {
    color: rgb(235, 84, 109) !important;
    background: rgb(12, 12, 12);
    padding: 0;
    margin: 0
  }

• The tracks are always placed on the bottom of the video. The background prevents the text from being unreadable but it might cover some important elements of the video. To avoid this you can add an empty area at the bottom of the video so the tracks don’t interfere with anything.