Player UI - Basic Showcase

by bitmovin_player

HTML

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

  <head>
    <title>Bitmovin Player Demo</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8" />

    <!-- Bitmovin Player -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bitmovin-player@8/bitmovinplayer.js"></script>
    <!-- Bitmovin Player UI JS -->
    <script src='https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/js/bitmovinplayer-ui.js' type='text/javascript'></script>
    <!-- Bitmovin Player UI CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bitmovin-player-ui@4/dist/css/bitmovinplayer-ui.css' rel='stylesheet'>
  </head>

  <body>
    <div class="player-wrapper">
      <div id="player"></div>
    </div>
  </body>
</html>

CSS

.player-wrapper {
  height: 300px;
  aspect-ratio: 16/9 auto;
  margin: 20px auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

JavaScript

var player = new bitmovin.player.Player(document.getElementById('player'), getPlayerConfig());
var uiManager = bitmovin.playerui.UIFactory.buildUI(player);

player.load(getSourceConfig());

function getPlayerConfig() {
  return {
    key: '3546c38b-1504-4261-b7b1-089a5e48ada5',
    analytics: {
      key: '3b48c57b-e189-437c-925e-268e0463e46f',
      title: 'Art of Motion',
      videoId: 'wizard-Art_of_Motion-1679951302872',
    },
    ui: false,
  };
}

function getSourceConfig() {
  return {
    title: 'Art of Motion',
    dash: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
  };
}