Selecting subtitles in Vimeo using JavaScript

Posted on

Selecting subtitles in Vimeo using JavaScript

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:

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 using:

import Player from '@vimeo/player';

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.

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.


Leave some feedback please!

Do you have anything to add? Or have some other remarks? Please let me know in the comment section below! Looking forward to the discusion!