adaptation/customLogicWithGraphs.html

<!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 type="text/javascript" src="//cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="bitrateGraphs.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Open Sans', sans-serif;
            color: #fff;
            font-weight: 300;
        }

        body {
            background: rgba(44, 131, 185, 1);
            background: -moz-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(44, 131, 185, 1)), color-stop(100%, rgba(30, 171, 227, 1)));
            background: -webkit-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            background: -o-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            background: -ms-linear-gradient(left, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            background: linear-gradient(to right, rgba(44, 131, 185, 1) 0%, rgba(30, 171, 227, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c83b9', endColorstr='#1eabe3', GradientType=1);
        }

        #wrapper {
            background: url(../images/logo-bg-demopage.png);
            height: 100vh;
        }

        #banner {
            border-bottom: 1px solid #fff;
            background-color: #1eabe3;
            width: 100%
        }

        #banner h1 {
            margin: 0;
            padding: 30px;
        }

        .logo {
            padding: 10px;
            width: 25%;
            min-width: 350px;
            float: left;
            margin: auto;
        }

        .title {
            width: 75%;
            white-space: nowrap;
        }

        .clear {
            clear: both;
        }

        .content {
            margin-bottom: 10em;
        }

        h1, h2, h3, p {
            font-weight: 300;
            text-align: center;
            margin: 40px;
        }

        #player {
            max-width: 900px;
            width: 90%;
            margin: auto;
            -webkit-box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.75);
        }

        a {
            color: #97d9ef;
            font-weight: 400;
            text-decoration: none;
        }

        a:hover {
            color: #fff;
        }

        @media (max-width: 800px) {
            .logo {
                width: 100%;
            }

            .title {
                display: none;
            }
        }

        .charts {
            width: 80%;
            margin: 40px auto;
        }

        #curve_chart {
            width: 100%;
            height: auto;
        }
    </style>

<body>
<div id="wrapper">
    <div id="banner">
        <div class="logo"><img src="../images/bitmovin-logo.png"></div>
        <div class="title"><h1>Adaptation logic in Bitmovin 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="charts">
                <div id="curve_chart" align='right'></div>
                <label for="maxBitrate">Max Bitrate (Mbps)</label>
                <input type="text" name="MaxBitrate" id="maxBitrate" value="5"/>
            </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 isSeeking = false;
    var isInBufferSeek = false;
    var lastVideoQuality = null;
    var availableVideoQualities, availableAudioQualities;
    var videoDownloadCount = 0;
    var bandwidthMeasurements = [];

    function getLowerVideoQuality(id) {
        var currentIndex = availableVideoQualities.map(function (rep) {
            return rep.id;
        }).indexOf(id);

        return availableVideoQualities[Math.max(0, currentIndex - 1)];
    }

    function getVideoQualityById(id) {
        return availableVideoQualities.find(function (rep) {
            return id === rep.id;
        });
    }

    function getNearestAudioQuality(bandwidth) {
        for (var i = availableAudioQualities.length - 1; i >= 0; i--) {
            if (availableAudioQualities[i].bitrate <= bandwidth) {
                return availableAudioQualities[i];
            }
        }

        return availableAudioQualities[0];
    }

    function calcAverageBandwidth() {
        return Math.round(bandwidthMeasurements.reduce(function (acc, val) {
            return acc + val;
        }, 0) / bandwidthMeasurements.length) || 0;
    }

    var conf = {
        key: "YourKEY",
        events: {
            seek: function (evt) {
                var bufferLevel = Math.min(player.getAudioBufferLength(), player.getVideoBufferLength());
                // only do that if we seek outside of the buffer
                if (evt.seekTarget > (evt.position + bufferLevel)) {
                    // save quality one below current, faster start after seek
                    var currentQuality = player.getDownloadedVideoData();
                    lastVideoQuality = getLowerVideoQuality(currentQuality.id);
                    console.info('ABR - set lastQuality on seek: ' + lastVideoQuality.id);
                } else {
                    isInBufferSeek = true;
                }

                isSeeking = true;
            },
            seeked: function () {
                if (isInBufferSeek) {
                    isInBufferSeek = false;
                    isSeeking = false;
                }
            },
            stallstarted: function () {
                console.info('ABR - onStallStarted', {
                    video: player.getVideoBufferLength(),
                    audio: player.getAudioBufferLength()
                });
                if (!isSeeking && lastVideoQuality) {
                    console.info('ABR - reset set lastQuality on stall');
                    lastVideoQuality = null;
                }
            },
            stallended: function () {
                console.info('ABR - onStallEnded');
                isSeeking = false;
            },
            downloadfinished: function (evt) {
                if (evt.downloadType === 'media/video' && evt.mimeType.indexOf('video') > -1 && evt.size > 2000) {
                    videoDownloadCount++;

                    var measurement = (evt.size * 8) / evt.downloadTime;
                    console.info('ABR - BANDWIDTH', measurement, JSON.stringify(bandwidthMeasurements));
                    bandwidthMeasurements.push(measurement);
                    if (bandwidthMeasurements.length > 5) {
                        bandwidthMeasurements.shift();
                    }
                }
            }
        },
        adaptation: {
            desktop: {
                onVideoAdaptation: function (evt) {
                    // this gets called before `sourceLoaded` so we need to weak init
                    // the availableAudioQualities & availableVideoQualities
                    if (!availableVideoQualities) {
                        availableVideoQualities = player.getAvailableVideoQualities();
                    }
                    if (!availableAudioQualities) {
                        availableAudioQualities = player.getAvailableAudioQualities();
                    }
                    var suggestedQuality = getVideoQualityById(evt.suggested);

                    if (isSeeking && lastVideoQuality) {
                        console.info('ABR - keep quality during seeking: ' + lastVideoQuality.id);
                        // return last quality during seeking
                        return lastVideoQuality.id;
                    }

                    if (lastVideoQuality && lastVideoQuality.bitrate > suggestedQuality.bitrate) {
                        console.info('ABR - onVideoAdaptation (override), ' + JSON.stringify({
                            id: lastVideoQuality.id,
                            bitrate: (lastVideoQuality.bitrate / 1000000).toFixed(2),
                            videoBuffer: player.getVideoBufferLength(),
                            audioBuffer: player.getAudioBufferLength()
                        }));
                        return lastVideoQuality.id;
                    } else if (lastVideoQuality) {
                        console.info('ABR - reset adaptation logic override');
                        // reset adaptation logic override
                        lastVideoQuality = null;
                    }

                    console.info('ABR - onVideoAdaptation (suggested), ' + JSON.stringify({
                        id: evt.suggested,
                        bitrate: (suggestedQuality.bitrate / 1000000).toFixed(2),
                        videoBuffer: player.getVideoBufferLength(),
                        audioBuffer: player.getAudioBufferLength()
                    }));
                    // return suggested quality ID
                    return evt.suggested;
                },
                onAudioAdaptation: function (evt) {
                    // choose audio quality on 10% of average bandwidth
                    var averageBandwidth = calcAverageBandwidth();
                    var selectedAudioQuality = getNearestAudioQuality(averageBandwidth * 0.1);

                    console.info('ABR - onAudioAdaptation ' + JSON.stringify({
                        bandwidth: averageBandwidth,
                        suggested: evt.suggested,
                        selected: selectedAudioQuality.id,
                        bitrate: selectedAudioQuality.bitrate
                    }));

                    return selectedAudioQuality.id;
                }
            }
        }
    };

    var source = {
        dash: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
        hls: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
        progressive: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
        poster: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg"
    };

    var player = new bitmovin.player.Player(document.getElementById("player"), conf);
    var bitrateGraphs = new BitrateGraphs(player);

    player.load(source).then(function () {
        bitrateGraphs.init();
    }, function (error) {
        console.log(error);
    });
</script>