Using the Mux player using the connector

If you’ve created your project in Timbra using the Mux connector, you can use the plugin to add captions to the Mux player:

// html
<mux-player id="my-player" playback-id="<<YOUR ID>>"></mux-player>

// js
import { Timbra } from '@captionhub/timbra.js';

const muxPlayer = document.querySelector('mux-player');

const timbra = new Timbra.MuxPlugin({
  video: muxPlayer,
});

timbra.startCaptions();

You can also load the script from our CDN. You can get the versioned script URL and captions URL from the “Plugin integration” tab on a live project page. For all options, see the Timbra.js docs.

Note that the embed code works for all players, as we’ll look up the captions by the Mux playback ID in the player.

Using the Mux Player with custom source

If you’re using the Mux player with a “custom” source by specifying src instead of playback-id, you’ll need to specify the captionsURL when initialising the plugin.

// html
<mux-player id="my-player" src="http://example.com/playlist.m3u8"></mux-player>

// js
import { Timbra } from '@captionhub/timbra.js';

const muxPlayer = document.querySelector('mux-player');

const timbra = new Timbra.MuxPlugin({
  video: muxPlayer,
  captionsURL: "https://cdn.captionhub.com/live/public/captions/captionhub-3e443cbbb87b.json"
});

timbra.startCaptions();