Feature/add video quality peak limiter

player/custom-quality-labels/README.md

@@ -0,0 +1,7 @@
+# 4K
+
+Enable users to watch 4K high-definition content
+
+### Tags
+
+  - TestTag

player/custom-quality-labels/index.html

@@ -0,0 +1,31 @@
+<script type="text/javascript"
+        src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
+<script type="text/javascript"
+        src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.js"></script>
+<script type="text/javascript"
+        src="//bitmovin-a.akamaihd.net/bitmovin-analytics/stable/1/bitmovinanalytics.min.js"></script>
+
+<div class="description">
+    <p>
+        This demo showcases how to customize video quality labels. You can use this to A/B test labels that make most sense to your users.
+    </p>
+</div>
+
+<div class="row">
+    <div class="col-lg-6 player-col">
+        <div id="player" class="tv-frame">
+            <div id="player-container"></div>
+        </div>
+        <br/>
+        <ul>
+            <li>Map bitrates to actual values</li>
+            <li>Map bitrates to low, medium, high, premium labels</li>
+            <li>Map higher quality labels for HD, UHD, 4K etc.</li>
+        </ul>
+    </div>
+    <div class="col-lg-6 code-col">
+        <div class="setup-code">
+            ${code:setup.js}
+        </div>
+    </div>
+</div>

player/custom-quality-labels/info.yaml

@@ -0,0 +1,16 @@
+title: Custom Quality Labels
+description: Customize video quality labels
+long_description: To be defined.
+
+executable:
+  executable: true
+  indexfile: index.html
+
+code:
+  show_code: true
+  language: js
+  files:
+    - setup.js
+
+tags:
+  - To be defined

player/custom-quality-labels/js/script.js

@@ -0,0 +1,59 @@
+var humanizeBitrate = function(bitrate){
+    var mbit = bitrate / 1000000;
+    var rounded = mbit < 3 ? Math.round(mbit * 10) / 10 : Math.round(mbit);
+    return rounded + 'Mbit';
+};
+
+var getQualityLabels = function (data) {
+    if (data.height <= 144) {
+      return '144p (' + humanizeBitrate(data.bitrate) + ')';
+    } else if (data.height <= 240) {
+      return '240p (' + humanizeBitrate(data.bitrate) + ')';
+    } else if (data.height <= 360) {
+      return '360p (' + humanizeBitrate(data.bitrate) + ')';
+    } else if (data.height <= 480) {
+      return 'SD 480p (' + humanizeBitrate(data.bitrate) + ')';
+    } else if (data.height <= 720) {
+      return 'HD 720p (' + humanizeBitrate(data.bitrate) + ')';
+    } else if (data.height <= 1080) {
+      return 'HD 1080p (' + humanizeBitrate(data.bitrate) + ')';
+    } else if (data.height <= 1440) {
+      return 'HD 1440p (' + humanizeBitrate(data.bitrate) + ')';
+    } else if (data.height <= 2160) {
+      return '4K 2160p (' + humanizeBitrate(data.bitrate) + ')';
+    }
+};
+
+var conf = {
+  key: '29ba4a30-8b5e-4336-a7dd-c94ff3b25f30',
+  analytics: {
+    key: '45adcf9b-8f7c-4e28-91c5-50ba3d442cd4',
+    videoId: 'custom-quality-labels'
+  },
+  playback: {
+    muted: true
+  }
+};
+
+var source = {
+  hls: 'https://cdn.bitmovin.com/content/demos/4k/38e843e0-1998-11e9-8a92-c734cd79b4dc/manifest.m3u8',
+  poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png',
+  labeling: {
+    hls: {
+      qualities: getQualityLabels
+    }
+  }
+};
+
+var playerContainer = document.getElementById('player-container');
+var player = new bitmovin.player.Player(playerContainer, conf);
+
+function loadPlayer() {
+  player.load(source).then(function() {
+    player.setVideoQuality('1600_50128000');
+  });
+}
+
+$(document).ready(function () {
+  loadPlayer();
+});

player/custom-quality-labels/setup.js

@@ -0,0 +1,30 @@
+var getQualityLabels = function (data) {
+  if (data.height <= 1440) {
+    return '1440p HD';
+  } else if (data.height <= 2160) {
+    return '2160p 4K';
+  }
+}
+
+var conf = {
+    key: '<YOUR PLAYER KEY>'
+  };
+
+var source = {
+  dash: 'https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd',
+  hls: 'https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
+  poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png',
+  labeling: {
+    dash: {
+      qualities: getQualityLabels
+    },
+    hls: {
+      qualities: getQualityLabels
+    }
+  }
+};
+
+var playerContainer = document.getElementById('player-container');
+var player = new bitmovin.player.Player(playerContainer, conf);
+
+player.load(source);