[object Object] Icon

Encoding
Learn how to create, start, manage and modify Encodings

[object Object] Icon

Player
Learn how to create, start, manage and modify Players

[object Object] Icon

Analytics
Learn how to create, start, manage and modify Analyticss

User shortcuts for search
Focus by pressing f
Hide results by pressing Esc
Navigate via   keys

Thu Sep 13 2018

How to add external subtitles to the Bitmovin Player

OverviewLink Icon

While our player automatically adds all supported subtitle formats into its subtitle menu, you can also add additional external subtitles, which aren't stated in the manifest of your content. This can be done by using the addSubtitle() API call of the player:

ExampleLink Icon

1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>Bitmovin Example</title>
5 <meta charset="UTF-8"/>
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <script type="text/javascript" src="https://bitmovin-a.akamaihd.net/bitmovin-player/stable/7/bitmovinplayer.js">
9 </script>
10</head>
11<body>
12<div id="player"></div>
13<script type="text/javascript">
14 var player = bitmovin.player("player");
15
16 var conf = {
17 key: "YOUR_BITMOVIN_API_KEY",
18 source: {
19 title: "Bitmovin Player - " . bitmovin.player.version,
20 description: "This example shows how you can add additional subtitles to the player, which aren't stated in the manifest of your content",
21 dash: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
22 hls: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
23 progressive: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
24 poster: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg"
25 }
26 };
27
28
29 player.setup(conf).then(function (playerInstance) {
30 var enSubtitle = {
31 id: "sub1",
32 lang: "en",
33 label: "English",
34 url: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt",
35 kind: "subtitle"
36 };
37 player.addSubtitle(enSubtitle);
38 }, function (reason) {
39 console.log("Error while creating bitmovin player instance", reason);
40 });
41
42</script>
43</body>
44</html>

Player EventsLink Icon

Further the player fires an event, if subtitles are added or removed, or if a different subtitle track is being used by the player:

Give us feedback