Player UI - Dynamic Timeline Markers

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="marker-buttons">
      <button id="btn-add-marker">Add a Marker</button>
      <button id="btn-remove-marker">Remove a marker</button>
    <div class="player-wrapper">
      <div id="player"></div>
    </div>

    </div>
  </body>

</html>

CSS

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

.marker-buttons {
  text-align: center;
}

JavaScript

var player = new bitmovin.player.Player(document.getElementById('player'), getPlayerConfig());

var uiManager = bitmovin.playerui.UIFactory.buildUI(player);

//Add Click-Events to buttons when playerUI is ready
document
  .querySelector("#btn-add-marker")
  .addEventListener("click", () => {
    var randomPosition = Math.floor(
      Math.random() * Math.floor(player.getDuration())
    );
    uiManager.addTimelineMarker({
      time: randomPosition,
      title: 'Random marker at ' + randomPosition + ' seconds'
    });
  });
document
  .querySelector("#btn-remove-marker")
  .addEventListener("click", () => {
    var currentMarkers = uiManager.getTimelineMarkers();
    var randomMarkerKey = Math.floor(
      Math.random() * Math.floor(currentMarkers.length - 1)
    );
    uiManager.removeTimelineMarker(
      currentMarkers[randomMarkerKey]
    )
  });

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',
  };
}