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:
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
Originally published at https://samvloeberghs.be on March 1, 2018
Top comments (0)