From 23d65f05ec55622549a16f9a03369d1134b8eac1 Mon Sep 17 00:00:00 2001 From: Valentino Zablocki Date: Wed, 13 Feb 2019 15:19:57 +0100 Subject: [PATCH 1/3] Add custom quality labels --- player/custom-quality-labels/README.md | 7 +++ player/custom-quality-labels/css/style.css | 6 ++ player/custom-quality-labels/icon.svg | 6 ++ player/custom-quality-labels/index.html | 35 +++++++++++ player/custom-quality-labels/info.yaml | 16 +++++ player/custom-quality-labels/js/script.js | 69 ++++++++++++++++++++++ player/custom-quality-labels/setup.js | 30 ++++++++++ 7 files changed, 169 insertions(+) create mode 100644 player/custom-quality-labels/README.md create mode 100644 player/custom-quality-labels/css/style.css create mode 100644 player/custom-quality-labels/icon.svg create mode 100644 player/custom-quality-labels/index.html create mode 100644 player/custom-quality-labels/info.yaml create mode 100644 player/custom-quality-labels/js/script.js create mode 100644 player/custom-quality-labels/setup.js diff --git a/player/custom-quality-labels/README.md b/player/custom-quality-labels/README.md new file mode 100644 index 00000000..217a1b63 --- /dev/null +++ b/player/custom-quality-labels/README.md @@ -0,0 +1,7 @@ +# 4K + +Enable users to watch 4K high-definition content + +### Tags + + - TestTag diff --git a/player/custom-quality-labels/css/style.css b/player/custom-quality-labels/css/style.css new file mode 100644 index 00000000..1c23464d --- /dev/null +++ b/player/custom-quality-labels/css/style.css @@ -0,0 +1,6 @@ +@media (min-width: 992px) { + .player-col { + flex: 0 0 100%; + max-width: 100%; + } +} \ No newline at end of file diff --git a/player/custom-quality-labels/icon.svg b/player/custom-quality-labels/icon.svg new file mode 100644 index 00000000..0137c469 --- /dev/null +++ b/player/custom-quality-labels/icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/player/custom-quality-labels/index.html b/player/custom-quality-labels/index.html new file mode 100644 index 00000000..4ec3cda0 --- /dev/null +++ b/player/custom-quality-labels/index.html @@ -0,0 +1,35 @@ + + + + +
+

+ 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. +

+
+ +
+
+
+
+
+
+
+ +
+
+
    +
  • Map bitrates to actual values
    • +
  • Map bitrates to low, medium, high, premium labels
    • +
  • Map higher quality labels for HD, UHD, 4K etc.
    • +
+
+
+
+ ${code:setup.js} +
+
+
diff --git a/player/custom-quality-labels/info.yaml b/player/custom-quality-labels/info.yaml new file mode 100644 index 00000000..c196d81e --- /dev/null +++ b/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 diff --git a/player/custom-quality-labels/js/script.js b/player/custom-quality-labels/js/script.js new file mode 100644 index 00000000..b1883307 --- /dev/null +++ b/player/custom-quality-labels/js/script.js @@ -0,0 +1,69 @@ +var playTimestamp; + +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: '4k' + }, + events: { + play: function (e) { + playTimestamp = e.timestamp; + }, + playing: function (e) { + document.getElementById('startup').innerHTML = e.timestamp - playTimestamp + 'ms'; + } + }, + 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(); +}); diff --git a/player/custom-quality-labels/setup.js b/player/custom-quality-labels/setup.js new file mode 100644 index 00000000..c46561bc --- /dev/null +++ b/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: '' + }; + +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); \ No newline at end of file From dbbf6deca01e95a657083cc7053d64c1662cf4e7 Mon Sep 17 00:00:00 2001 From: Valentino Zablocki Date: Thu, 14 Feb 2019 10:22:21 +0100 Subject: [PATCH 2/3] Removed unused code --- player/custom-quality-labels/js/script.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/player/custom-quality-labels/js/script.js b/player/custom-quality-labels/js/script.js index b1883307..0a23b4cc 100644 --- a/player/custom-quality-labels/js/script.js +++ b/player/custom-quality-labels/js/script.js @@ -1,5 +1,3 @@ -var playTimestamp; - var humanizeBitrate = function(bitrate){ var mbit = bitrate / 1000000; var rounded = mbit < 3 ? Math.round(mbit * 10) / 10 : Math.round(mbit); @@ -30,15 +28,7 @@ var conf = { key: '29ba4a30-8b5e-4336-a7dd-c94ff3b25f30', analytics: { key: '45adcf9b-8f7c-4e28-91c5-50ba3d442cd4', - videoId: '4k' - }, - events: { - play: function (e) { - playTimestamp = e.timestamp; - }, - playing: function (e) { - document.getElementById('startup').innerHTML = e.timestamp - playTimestamp + 'ms'; - } + videoId: 'custom-quality-labels' }, playback: { muted: true From fe1f60aac8915cc6c81a94f8ff675b7673dbe976 Mon Sep 17 00:00:00 2001 From: Valentino Zablocki Date: Thu, 14 Feb 2019 10:30:38 +0100 Subject: [PATCH 3/3] CSS changes --- player/custom-quality-labels/css/style.css | 6 ------ player/custom-quality-labels/index.html | 6 +----- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/player/custom-quality-labels/css/style.css b/player/custom-quality-labels/css/style.css index 1c23464d..e69de29b 100644 --- a/player/custom-quality-labels/css/style.css +++ b/player/custom-quality-labels/css/style.css @@ -1,6 +0,0 @@ -@media (min-width: 992px) { - .player-col { - flex: 0 0 100%; - max-width: 100%; - } -} \ No newline at end of file diff --git a/player/custom-quality-labels/index.html b/player/custom-quality-labels/index.html index 4ec3cda0..681abf8e 100644 --- a/player/custom-quality-labels/index.html +++ b/player/custom-quality-labels/index.html @@ -16,11 +16,7 @@
- - - -
-
+
  • Map bitrates to actual values
  • Map bitrates to low, medium, high, premium labels