Bitmovin Learning Lab - 9 - Styling with CSS - 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">
    
    <br/>
    <button type="submit" class="btn btn-dark" id="loadClearSourceButton">Clear Stream</button>
    <button type="submit" class="btn btn-dark" id="loadDrmSourceButton">DRM Protected Stream</button>
    <br/>
    <br/>
  
    <div class="player-wrapper">
      <div id="player"></div>
    </div>
    <br/>
    
    <span>DRM License URLs called:</span>
    <p id="drm-requests"></p>
    <br/><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);
}

.bmpui-ui-watermark {  
  /* BLL Change the background image to something */
  /* sample image: "https://cdn-icons-png.flaticon.com/512/1086/1086223.png" */

  background-size: contain;
}

.bmpui-ui-playbacktimelabel {
  /* BLL Change the color and background color to something */
}

JavaScript

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

const randomNumber = Math.floor(Math.random()*100);
const percentageUsers = 40;
var bufferTarget = 30;
var experimentName = 'buffer_30';

if (randomNumber <= percentageUsers) {
  experimentName = 'buffer_10'
	bufferTarget = 10;
}

const conf = {
  key: '18ca6ad5-9768-4129-bdf6-17685e0d14d2',
  analytics: {
    key: '2d7bf7f2-7d45-41e9-8ddb-4c0785bb644e',
    videoId: 'Bitmovin Learning Lab',
    title: 'Lets Play Video',
    experimentName: experimentName
  },
  playback: {
  	autoplay: true,
    muted: true,
  },
  adaptation: {
    bitrates: {
      minSelectableAudioBitrate: '0kbps',
      maxSelectableAudioBitrate: '320kbps',
      minSelectableVideoBitrate: '0kbps',
      maxSelectableVideoBitrate: 'infinity'  
  	}
  },
  buffer: {
  	video: {
    	forwardduration: bufferTarget,
  	},
  	audio: {
    	forwardduration: bufferTarget,
  	},
	},
};

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);
});

$('#loadDrmSourceButton').click(function (link) {
	// AES-128 encryption is used instead of Fairplay DRM for Safari

	const drmSource = {
    dash: 'https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/mpds/11331.mpd',
   ...