Bitmovin Learning Lab - 1 - Basic VOD Playback

by Bitmovin

HTML

<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>
  </div>
</div>

CSS

figure {
  margin: 0;
  padding: 0;
}

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

.container a {
  color: white;
}

.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

const conf = {
	  key: '18ca6ad5-9768-4129-bdf6-17685e0d14d2'
};

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
})
.catch(function(error) {
  // Error when loading the source
  console.error(error);
});