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..e69de29b 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..681abf8e --- /dev/null +++ b/player/custom-quality-labels/index.html @@ -0,0 +1,31 @@ + + + + +
+

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

+
+ +
+
+
+
+
+
+ +
+
+
+ ${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..0a23b4cc --- /dev/null +++ b/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(); +}); 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