Bitmovin Learning Lab - 6 - Bitrate - Start

by Bitmovin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
<div class="container">
  <div class="content">
    <div class="player-wrapper">
      <div id="player"></div>
    </div>
    <br/>
    
    <p1>Video Buffer</p1>
    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="videoBuffer"></div>
    </div>
    <br/>
    
    <p1>Audio Buffer</p1>
    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="audioBuffer"></div>
    </div>
    
    <br/>
    <canvas id="myChart" width="400" height="400"></canvas>
    
  </div>
</div>

CSS

figure {
  margin: 0;
  padding: 0;
}

.container {
  color: black;
  text-align: center;
}

.container a {
  color: black;
}

.container h1 {
  margin-bottom: 22px;
  line-height: 66px;
}

.container h2 {
  font-weight: normal;
  margin-bottom: 36px;
  line-height: 26px;
}

.player-wrapper {
  width: 80%;
  margin: 20px auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

JavaScript

var bitrateChart;
var currentDownloadBitrate = 0;
var currentPlayingBitrate = 0;

const conf = {
  key: '18ca6ad5-9768-4129-bdf6-17685e0d14d2',
  analytics: {
    key: '2d7bf7f2-7d45-41e9-8ddb-4c0785bb644e',
    videoId: 'Bitmovin Learning Lab',
    title: 'Lets Play Video'
  },
  playback: {
  	autoplay: true,
    muted: true,
  },
  // BLL set min and max audio and video bitrate 
  buffer: {
  	video: {
    	forwardduration: 10,
  	},
  	audio: {
    	forwardduration: 10,
  	},
	},
};

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

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

player.load(source)
.then(function() {
  // Source successfully loaded into player
  console.log('Source successfully loaded');
  setupChart();
})
.catch(function(error) {
  // Error when loading the source
  console.error(error);
});

const getVideoBufferLevel = function() {
	return player.buffer.getLevel('forwardduration','video').level
}

const getAudioBufferLevel = function() {
	return player.buffer.getLevel('forwardduration','audio').level
}

player.on('timechanged', function(event) {
	const videoBufferLevel =  Math.round(getVideoBufferLevel() * 100) / 100;
	$("#videoBuffer").css('width', videoBufferLevel + '%').attr('aria-valuenow', videoBufferLevel);
  $("#videoBuffer").text(videoBufferLevel)
  
  const audioBufferLevel = Math.round(getAudioBufferLevel() * 100) / 100;
	$("#audioBuffer").css('width', audioBufferLevel + '%').attr('aria-valuenow', audioBufferLevel);
 ...