Selecting subtitles in Vimeo using JavaScript

Originally published at https://samvloeberghs.be on March 1, 2018

At SponsorMatch we deploy an Angular Universal website & application that is shown in different languages. Currently we support Dutch (nl) and English (en). On the homepage we use a simple introduction video / explainimation that is hosted on Vimeo to show how the product works. This animation video is made in English but for the Dutch-speaking market we provided Dutch subtitles.

Problem

It seems that it's not possible to set the default selected subtitle using the Vimeo iframe embed solution. It's probably possible but anyway, I couldn't find any information on Google or on the Vimeo documentation. There are even some questions on StackOverflow that remained unanswered for years:

• Vimeo force CC language
• Vimeo Embed Language/Subtitles

Solution

There are several solutions possible and one is moving completely to the JavaScript API Vimeo provides. More information can be found here: https://github.com/vimeo/player.js

The second solution I used was combining the iframe embed solution with the JS API. Basically we just use the iframe that was used for embedding as parameter in the Player constructor:

Using it in Angular

Using it in Angular is fairly easy.. We need to install the @vimeo/player package using yarn or npm:

npm i -s @vimeo/player

Next we can import the Player directly and by using the enableTextTrack function we can easily set the language. As developers / implementors I believe we should be responsible in some way for knowing which languages are available to use. Meaning: which subtitles / texttracks are implemented on the embedded video.

import Player from '@vimeo/player';
const player = new Player(document.getElementById('intro_explanimation'));

player.enableTextTrack(this.language, 'subtitles').then(function (track) {
    // track contains language, kind and label
}).catch(function (error) {
    // error holds what happened in detail
});

Please take a look at the full example below. The end result is implemented on the homepage of SponsorMatch.

angular-vimeo-set-language-subtitles

Further reading

• Vimeo - Developer API
• Player.js - Interact with and control an embedded Vimeo Player

Originally published at https://samvloeberghs.be on March 1, 2018