How to add external subtitles to the Bitmovin Player

Overview

If subtitle tracks are provided with in the manifest of your content, the player automatically recognizes them and shows them in its subtitle selection menu.
You also add external subtitle tracks to the player using its Subtitle API. It allows to control all subtitle tracks available to the player

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bitmovin Demo</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/bit-fav.png">
    <!-- Bitmovin Player -->
    <script src="//cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
</head>

<body>
    <div id="wrapper">
        <div id="banner">
            <div class="logo"><img src="images/bitmovin-logo.png"></div>
            <div class="title">
                <h1>Bitmovin HTML5 Player</h1>
            </div>
            <div class="clear"></div>
        </div>
        <div class="container">
            <h1>HTML5 Adaptive Streaming Player for MPEG-DASH & HLS</h1>
            <h2>Your videos play everywhere with low startup delay, no buffering and in highest quality.</h2>
            <div class="content">
                <div class="player-wrapper">
                    <div id="player"></div>
                </div>
                <div class="description">
                    <p>For more information about the bitmovin player, please have a look at our online <a href="//bitmovin.com/support" target="_blank">Developer Section</a>.</p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var player;

        var conf = {
            key: 'YOUR KEY HERE'
        };
        var source = {
            dash: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
            hls: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
            progressive: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
            poster: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/poster.jpg'
        };

        player = new bitmovin.player.Player(document.getElementById('player'), conf);

        player.load(source).then(function() {
            console.log('Successfully loaded source'); // Success!
            var enSubtitle = {
                id: "sub1",
                lang: "en",
                label: "English",
                url: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt",
                kind: "subtitle"
            };

            player.subtitles.add(enSubtitle);

        }, function() {
            console.log('Error while loading source'); // Error!
        });
    </script>
</body>

</html>

Player events

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

Updated 4 months ago