Add WISH ABR demo

player/custom-wish-abr/README.md

@@ -0,0 +1,10 @@
+# Custom WISH ARB
+
+Showcasing the player's ability to implement custom ABR using adaptation callback API.
+
+### Tags
+
+- adaptation logic
+- adaption
+- bitrate
+- quality-switching

player/custom-wish-abr/css/style.css

@@ -0,0 +1,18 @@
+body .demo-detail .code-example {
+    margin-top: 0;
+}
+
+@media (min-width: 1200px) {
+    .player-col {
+        float: left;
+    }
+
+    .code-col {
+        float: right;
+    }
+}
+
+body:not(.fullscreen) :not(.no-frame).phone-frame::before {
+    top: 0;
+    left: 0;
+}

player/custom-wish-abr/demo.js

@@ -0,0 +1,34 @@
+var availableRepresentations = [];
+
+function onVideoAdaptationHandler(param) {
+  var suggestedRep = availableRepresentations.filter((rep) => rep.id === param.suggested)[0];
+  if (suggestedRep) {
+    console.log('Suggested representation: ' + availableRepresentations[i].bitrate / 1000 + 'kbps');
+  }
+}
+
+var conf = {
+  key: '<YOUR PLAYER KEY>',
+  adaptation: {
+    desktop: {
+      onVideoAdaptation: onVideoAdaptationHandler,
+    },
+    mobile: {
+      onVideoAdaptation: onVideoAdaptationHandler,
+    },
+  },
+};
+
+var source = {
+  dash: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+  hls: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
+  progressive: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
+  poster: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/poster.jpg',
+};
+
+var playerContainer = document.getElementById('player-container');
+var player = new bitmovin.player.Player(playerContainer, conf);
+
+player.load(source).then(function () {
+  availableRepresentations = player.getAvailableVideoQualities();
+});

player/custom-wish-abr/index.html

@@ -0,0 +1,46 @@
+<script type="text/javascript"
+        src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
+<script type="text/javascript"
+        src="https://cdn.bitmovin.com/analytics/web/beta/2/bitmovinanalytics.min.js"></script>
+<link rel="stylesheet" href="https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.css">
+<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+
+<div class="description">
+    <p>
+        The adaptive bitrate choosing feature of the Bitmovin Player can <b>avoid re-buffering</b> and <b>minimize the
+        startup time</b>, while targeting selected mode.
+    </p>
+    <p>
+        Select desired ABR mode and start the video below to see the ABR feature in action.
+    </p>
+</div>
+
+<div class="row">
+    <div class="col-lg-6 player-col">
+        <div id="player">
+            <div id="player-container"></div>
+        </div>
+        <div class="options-wrapper">
+            <form>
+              <label for="preferences">Select a mode:</label>
+              <select name="preferences" id="preferences">
+                <option value="save_data">Reduce Data Usage</option>
+                <option value="balance" selected>Balanced</option>
+                <option value="high_quality">Highest Quality</option>
+              </select>
+              <label for="quality_function">Select a quality function:</label>
+              <select name="quality_function" id="quality_function">
+                <option value="linear" selected>Linear</option>
+                <option value="logarithm">Logarithm</option>
+              </select>
+            </form>
+        </div>
+    </div>
+    <div class="col-lg-6 code-col">
+        <div id="chart-wrapper">
+            <h4 class="mb-3 d-none d-md-block mb-0">Bitrate</h4>
+            <div id="curve_chart" style="width:100%;height:260px" class="mb-4 mt-4 mb-md-0 mt-md-0">
+            </div>
+        </div>
+    </div>
+</div>

player/custom-wish-abr/info.json

@@ -0,0 +1,27 @@
+{
+  "title": "WISH ABR Algorithm",
+  "description": "Showcasing the player's ability to implement custom WISH ABR algorithm as own adaptation logic",
+  "long_descripition": "The adaptation logic in the player is the key to avoiding buffering and minimizing startup time. Custom adaptation gives you complete control over your player.",
+  "executable": {
+    "executable": true,
+    "indexfile": "index.html"
+  },
+  "code": {
+    "show_code": true,
+    "language": "js",
+    "files": [
+      "demo.js"
+    ]
+  },
+  "metadata":{
+    "title":"Adaptive Bitrate Supported Player » Demo | Bitmovin",
+    "description": "Support your AVOD service with Bitmovin's ad insertion supported video player during any video position | VAST, VPAID, IMA & VMAP Supported ✅"
+  },
+  "tags": [
+    "adaptation logic",
+    "adaption",
+    "bitrate",
+    "quality-switching"
+  ],
+  "priority": 800
+}