From f4a43e84f799b657e033967f5ca366fbf9cd5b91 Mon Sep 17 00:00:00 2001 From: Nikola Nikushev Date: Wed, 24 Feb 2021 15:43:12 +0100 Subject: [PATCH 1/6] Updated demos to most recent version --- .../info.json | 31 +++++++++ analytics/analytics-impressions/info.json | 16 +++++ analytics/player-analytics-bundling/info.json | 20 ++++++ encoding/multi-codec-streaming/info.json | 22 ++++++ encoding/per-scene-adaptation/info.json | 19 +++++ encoding/per-scene-adaptation/js/script.js | 3 + encoding/per-title-encoding/info.json | 13 ++++ .../python/simple-encoding-to-s3/info.json | 20 ++++++ player/4k/info.json | 19 +++++ player/4k/js/script.js | 69 +++++++++---------- player/4k/setup.js | 54 +++++++++++---- player/ad-event-verification/info.json | 20 ++++++ player/ad-scheduling/info.json | 23 +++++++ player/audio-api/info.json | 20 ++++++ player/audio-only-streaming/index.html | 1 + player/audio-only-streaming/info.json | 19 +++++ player/audio-only-streaming/js/script.js | 12 ++-- player/av1/info.json | 24 +++++++ player/caption-styling/css/style.css | 4 ++ player/caption-styling/info.json | 22 ++++++ player/channel-switching/index.html | 9 +-- player/channel-switching/info.json | 22 ++++++ player/channel-switching/js/script.js | 13 ++++ player/chromecast/caf.js | 13 ++++ player/chromecast/index.html | 52 ++++++++++++-- player/chromecast/info.json | 24 +++++++ player/chromecast/info.yaml | 2 + player/chromeless/css/style.css | 8 +++ player/chromeless/info.json | 22 ++++++ player/custom-adaptation/info.json | 23 +++++++ player/custom-adaptation/js/script.js | 2 +- player/custom-quality-labels/info.json | 19 +++++ player/drm/css/style.css | 2 + player/drm/info.json | 22 ++++++ player/frame-accurate-seeking/info.json | 12 ++++ player/hls-fmp4/css/style.css | 4 ++ player/hls-fmp4/info.json | 23 +++++++ player/low-latency-streaming/index.html | 2 +- player/low-latency-streaming/info.json | 18 +++++ player/low-latency-streaming/js/script.js | 2 +- player/modular-player/css/style.css | 10 +++ player/modular-player/info.json | 15 ++++ player/multi-audio-tracks/info.json | 23 +++++++ player/native-sdks/info.json | 50 ++++++++++++++ player/native-sdks/js/script.js | 2 +- player/overlay-ad/info.json | 23 +++++++ player/picture-in-picture/index.html | 2 +- player/picture-in-picture/info.json | 25 +++++++ player/picture-in-picture/info.yaml | 2 +- player/picture-in-picture/js/script.js | 4 ++ player/player-ui-styling/css/style.css | 4 ++ player/player-ui-styling/index.html | 22 +++--- player/player-ui-styling/info.json | 23 +++++++ player/player-ui-styling/js/script.js | 31 +++++---- player/preload-vod/css/style.css | 3 + player/preload-vod/info.json | 20 ++++++ player/ssai/css/style.css | 4 ++ player/ssai/info.json | 23 +++++++ player/stream-test/info.json | 22 ++++++ player/stream-test/js/script.js | 3 +- player/thumbnail-seeking/css/style.css | 3 + player/thumbnail-seeking/info.json | 23 +++++++ player/variable-playback-speed/info.json | 20 ++++++ player/vr-360/css/style.css | 4 ++ player/vr-360/info.json | 22 ++++++ 65 files changed, 1005 insertions(+), 103 deletions(-) create mode 100644 analytics/analytics-bitrate-ladder-validator/info.json create mode 100644 analytics/analytics-impressions/info.json create mode 100644 analytics/player-analytics-bundling/info.json create mode 100644 encoding/multi-codec-streaming/info.json create mode 100644 encoding/per-scene-adaptation/info.json create mode 100644 encoding/per-title-encoding/info.json create mode 100644 encoding/python/simple-encoding-to-s3/info.json create mode 100644 player/4k/info.json create mode 100644 player/ad-event-verification/info.json create mode 100644 player/ad-scheduling/info.json create mode 100644 player/audio-api/info.json create mode 100644 player/audio-only-streaming/info.json create mode 100644 player/av1/info.json create mode 100644 player/caption-styling/info.json create mode 100644 player/channel-switching/info.json create mode 100644 player/chromecast/caf.js create mode 100644 player/chromecast/info.json create mode 100644 player/chromeless/info.json create mode 100644 player/custom-adaptation/info.json create mode 100644 player/custom-quality-labels/info.json create mode 100644 player/drm/info.json create mode 100644 player/frame-accurate-seeking/info.json create mode 100644 player/hls-fmp4/info.json create mode 100644 player/low-latency-streaming/info.json create mode 100644 player/modular-player/info.json create mode 100644 player/multi-audio-tracks/info.json create mode 100644 player/native-sdks/info.json create mode 100644 player/overlay-ad/info.json create mode 100644 player/picture-in-picture/info.json create mode 100644 player/player-ui-styling/info.json create mode 100644 player/preload-vod/info.json create mode 100644 player/ssai/info.json create mode 100644 player/stream-test/info.json create mode 100644 player/thumbnail-seeking/info.json create mode 100644 player/variable-playback-speed/info.json create mode 100644 player/vr-360/info.json diff --git a/analytics/analytics-bitrate-ladder-validator/info.json b/analytics/analytics-bitrate-ladder-validator/info.json new file mode 100644 index 00000000..7d2d12b6 --- /dev/null +++ b/analytics/analytics-bitrate-ladder-validator/info.json @@ -0,0 +1,31 @@ +{ + "title": "Bitrate Ladder Validator", + "description": "Build and customize graphs exactly the way your team needs it", + "long_description": "Build and customize graphs exactly the way your team needs it to help troubleshoot, optimize and plan your development efforts.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "available-bitrates.js", + "available-bandwidth.js", + "playback-bitrate.js" + ] + }, + "tags": [ + "experimental", + "dashboard", + "analytics", + "bitrate", + "ladder validator", + "monitor", + "REST", + "AB", + "testing", + "QOE" + ], + "hide_github_link": true +} \ No newline at end of file diff --git a/analytics/analytics-impressions/info.json b/analytics/analytics-impressions/info.json new file mode 100644 index 00000000..2b577acd --- /dev/null +++ b/analytics/analytics-impressions/info.json @@ -0,0 +1,16 @@ +{ + "title": "Impression Count", + "description": "Query the Analytics Impressions that occurred in the last 24 hours, grouped by hour", + "long_description": "Querying the analytics engine to send specific metrics to your dashboard is what the Bitmovin Analytics system is all about. See the new Bitmovin Analytics demo.", + "code": { + "show_code": true, + "language": "js", + "files": [ + "impressions.js" + ] + }, + "tags": [ + "basic", + "impression" + ] +} \ No newline at end of file diff --git a/analytics/player-analytics-bundling/info.json b/analytics/player-analytics-bundling/info.json new file mode 100644 index 00000000..a07d0072 --- /dev/null +++ b/analytics/player-analytics-bundling/info.json @@ -0,0 +1,20 @@ +{ + "title": "Player and Analytics Bundling", + "description": "Optimize every play with no additional setup", + "long_description": "See how the new bundling of the player and analytics works. You get analytics data points instantly, without additional setup. Start analyzing your impressions right away.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "tags": [ + "player", + "analytics", + "bundling", + "no setup", + "insights" + ], + "additionalCategories": [ + "player" + ], + "hide_github_link": true +} \ No newline at end of file diff --git a/encoding/multi-codec-streaming/info.json b/encoding/multi-codec-streaming/info.json new file mode 100644 index 00000000..884b50ac --- /dev/null +++ b/encoding/multi-codec-streaming/info.json @@ -0,0 +1,22 @@ +{ + "title": "Multi-Codec Streaming", + "description": "Save bandwidth and improve quality by ensuring that you are delivering the most efficient codec possible", + "long_description": "Improve video quality by encoding in multiple codecs and dynamically switching between codecs based on the user’s individual playback environment.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "tags": [ + "multi codec streaming", + "h264", + "h265", + "vp9", + "hevc", + "hls", + "dash" + ], + "additionalCategories": [ + "player" + ], + "priority": 980 +} \ No newline at end of file diff --git a/encoding/per-scene-adaptation/info.json b/encoding/per-scene-adaptation/info.json new file mode 100644 index 00000000..04766a65 --- /dev/null +++ b/encoding/per-scene-adaptation/info.json @@ -0,0 +1,19 @@ +{ + "title": "Per-Scene Adaptation", + "description": "Save up to 30% on CDN costs and improve QoE with Per-Scene Adaptation", + "long_description": "Per-Scene offers another method to improve quality and or reduce bandwidth consumption by enabling the player to anticipate content complexity.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "tags": [ + "experimental", + "adaptation", + "scene", + "encoding" + ], + "additionalCategories": [ + "player" + ], + "priority": 950 +} \ No newline at end of file diff --git a/encoding/per-scene-adaptation/js/script.js b/encoding/per-scene-adaptation/js/script.js index 04bd3584..9de6f4e4 100644 --- a/encoding/per-scene-adaptation/js/script.js +++ b/encoding/per-scene-adaptation/js/script.js @@ -191,6 +191,9 @@ function updateThumbnails() { var chartArea = myLineChart.chartArea; var tmpThumb = player.getThumbnail(0); + if (tmpThumb == null) { + return; + } var chartWidth = chartArea.right - chartArea.left; var thumbnailWidth = chartWidth / MAX_SEGMENT_VIEW_COUNT; var ratio = thumbnailWidth / tmpThumb.width; diff --git a/encoding/per-title-encoding/info.json b/encoding/per-title-encoding/info.json new file mode 100644 index 00000000..5b9b479b --- /dev/null +++ b/encoding/per-title-encoding/info.json @@ -0,0 +1,13 @@ +{ + "title": "Per-Title Encoding", + "description": "Adjust the bitrate based on the complexity of the source file", + "long_description": "Per-Title Encoding is a technique for optimizing the bitrate of your encoding profiles based on the content of the video that you are encoding.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "tags": [ + "per title encoding" + ], + "priority": 1000 +} \ No newline at end of file diff --git a/encoding/python/simple-encoding-to-s3/info.json b/encoding/python/simple-encoding-to-s3/info.json new file mode 100644 index 00000000..2f40d941 --- /dev/null +++ b/encoding/python/simple-encoding-to-s3/info.json @@ -0,0 +1,20 @@ +{ + "title": "Encoding with Python and S3", + "description": "Create a DASH encoding on AWS in the Ireland region (eu-west-1) with Python and write to S3.", + "long_description": "This working code example will create DASH on AWS with Python and write to S3. The Bitmovin encoding solution is the fastest in the industry.", + "code": { + "show_code": true, + "language": "python", + "files": [ + "encoding.py" + ] + }, + "tags": [ + "basic", + "encoding", + "python", + "S3", + "AWS", + "DASH" + ] +} \ No newline at end of file diff --git a/player/4k/info.json b/player/4k/info.json new file mode 100644 index 00000000..50a6420f --- /dev/null +++ b/player/4k/info.json @@ -0,0 +1,19 @@ +{ + "title": "4K", + "description": "Enable users to watch 4K high-definition content", + "long_description": "To be defined.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js" + ] + }, + "tags": [ + "To be defined" + ] +} \ No newline at end of file diff --git a/player/4k/js/script.js b/player/4k/js/script.js index 00fb6430..be687354 100644 --- a/player/4k/js/script.js +++ b/player/4k/js/script.js @@ -1,29 +1,37 @@ 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 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 formatBitrate = function(bitrate) { + return '(' + humanizeBitrate(bitrate) + ')'; +}; + +var getQualityLabels = function(data) { + var label; + if (data.height <= 144) { + label = '144p'; + } else if (data.height <= 240) { + label = '240p'; + } else if (data.height <= 360) { + label = '360p'; + } else if (data.height <= 480) { + label = 'SD 480p'; + } else if (data.height <= 720) { + label = 'HD 720p'; + } else if (data.height <= 1080) { + label = 'HD 1080p'; + } else if (data.height <= 1440) { + label = 'HD 1440p'; + } else if (data.height <= 2160) { + label = '4K 2160p'; + } else { + return ''; + } + return label + ' ' + formatBitrate(data.bitrate); }; var conf = { @@ -33,15 +41,12 @@ var conf = { videoId: '4k' }, events: { - play: function (e) { + play: function(e) { playTimestamp = e.timestamp; }, - playing: function (e) { + playing: function(e) { document.getElementById('startup').innerHTML = e.timestamp - playTimestamp + 'ms'; } - }, - playback: { - muted: true } }; @@ -58,12 +63,6 @@ var source = { 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.load(source).then(function() { + player.setVideoQuality('1600_50128000'); }); diff --git a/player/4k/setup.js b/player/4k/setup.js index c46561bc..76d3afbf 100644 --- a/player/4k/setup.js +++ b/player/4k/setup.js @@ -1,23 +1,45 @@ -var getQualityLabels = function (data) { - if (data.height <= 1440) { - return '1440p HD'; +var humanizeBitrate = function(bitrate) { + var mbit = bitrate / 1000000; + var rounded = mbit < 3 ? Math.round(mbit * 10) / 10 : Math.round(mbit); + return rounded + 'Mbit'; +}; + +var formatBitrate = function(bitrate) { + return '(' + humanizeBitrate(bitrate) + ')'; +}; + +var getQualityLabels = function(data) { + var label; + if (data.height <= 144) { + label = '144p'; + } else if (data.height <= 240) { + label = '240p'; + } else if (data.height <= 360) { + label = '360p'; + } else if (data.height <= 480) { + label = 'SD 480p'; + } else if (data.height <= 720) { + label = 'HD 720p'; + } else if (data.height <= 1080) { + label = 'HD 1080p'; + } else if (data.height <= 1440) { + label = 'HD 1440p'; } else if (data.height <= 2160) { - return '2160p 4K'; + label = '4K 2160p'; + } else { + return ''; } -} + return label + ' ' + formatBitrate(data.bitrate); +}; var conf = { - key: '' - }; - + 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', + hls: 'https://cdn.bitmovin.com/content/demos/4k/38e843e0-1998-11e9-8a92-c734cd79b4dc/manifest.m3u8', + poster: 'https://bitmovin-a.akamaihd.net/webpages/demos/content/av1/poster_tos.jpg', labeling: { - dash: { - qualities: getQualityLabels - }, hls: { qualities: getQualityLabels } @@ -27,4 +49,6 @@ var source = { var playerContainer = document.getElementById('player-container'); var player = new bitmovin.player.Player(playerContainer, conf); -player.load(source); \ No newline at end of file +player.load(source).then(function() { + player.setVideoQuality('1600_50128000'); +}); diff --git a/player/ad-event-verification/info.json b/player/ad-event-verification/info.json new file mode 100644 index 00000000..80e6daac --- /dev/null +++ b/player/ad-event-verification/info.json @@ -0,0 +1,20 @@ +{ + "title": "Ad Event Verification", + "description": "Enable ad event reporting", + "long_description": "To be defined.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js", + "adEvents.js" + ] + }, + "tags": [ + "To be defined" + ] +} \ No newline at end of file diff --git a/player/ad-scheduling/info.json b/player/ad-scheduling/info.json new file mode 100644 index 00000000..362c7690 --- /dev/null +++ b/player/ad-scheduling/info.json @@ -0,0 +1,23 @@ +{ + "title": "Ad Scheduling", + "description": "Schedule VAST / IMA / VPAID ads at your desired time", + "long_description": "This demo showcases the Bitmovin Player’s ad insertion capabilities. The player can be used with different advertising standards, namely VAST, VPAID, IMA and VMAP.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "dynamic-schedule.js" + ] + }, + "tags": [ + "advertisement", + "VAST", + "IMA", + "VPAID" + ], + "priority": 860 +} \ No newline at end of file diff --git a/player/audio-api/info.json b/player/audio-api/info.json new file mode 100644 index 00000000..a118a7b2 --- /dev/null +++ b/player/audio-api/info.json @@ -0,0 +1,20 @@ +{ + "title": "Audio API", + "description": "Enable users to stream video as they scroll on the page", + "long_description": "To be defined.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js", + "scrollListener.js" + ] + }, + "tags": [ + "experimental" + ] +} \ No newline at end of file diff --git a/player/audio-only-streaming/index.html b/player/audio-only-streaming/index.html index a0fa5005..8e1a64ce 100644 --- a/player/audio-only-streaming/index.html +++ b/player/audio-only-streaming/index.html @@ -2,6 +2,7 @@ +

diff --git a/player/audio-only-streaming/info.json b/player/audio-only-streaming/info.json new file mode 100644 index 00000000..f5237f44 --- /dev/null +++ b/player/audio-only-streaming/info.json @@ -0,0 +1,19 @@ +{ + "title": "Audio Only Streaming", + "description": "Enables users to stream audio only content", + "long_description": "To be defined.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js" + ] + }, + "tags": [ + "To be defined" + ] +} \ No newline at end of file diff --git a/player/audio-only-streaming/js/script.js b/player/audio-only-streaming/js/script.js index 8766620f..e1aeeaea 100644 --- a/player/audio-only-streaming/js/script.js +++ b/player/audio-only-streaming/js/script.js @@ -3,7 +3,8 @@ var conf = { analytics: { key: '45adcf9b-8f7c-4e28-91c5-50ba3d442cd4', videoId: 'audio-only-streaming' - } + }, + ui: false }; var source = { @@ -13,13 +14,8 @@ var source = { var playerContainer = document.getElementById('player-container'); var player = new bitmovin.player.Player(playerContainer, conf); - -function loadPlayer() { - player.load(source).then(function() { - bitmovin.playerui.UIFactory.buildModernSmallScreenUI(player); - }); -} +bitmovin.playerui.UIFactory.buildModernSmallScreenUI(player); $(document).ready(function () { - loadPlayer(); + player.load(source); }); diff --git a/player/av1/info.json b/player/av1/info.json new file mode 100644 index 00000000..8a66ba06 --- /dev/null +++ b/player/av1/info.json @@ -0,0 +1,24 @@ +{ + "title": "AV1", + "description": "AV1 is a next generation codec that can reduce bandwidth and CDN costs by a factor of 10", + "long_description": "Bitmovin is spearheading the drive towards a commercially viable AV1 solution. See our online demonstration of AV1 encoding and playback.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "tags": [ + "experimental", + "AV1", + "Chrome", + "Firefox", + "Google", + "Mozilla", + "Nightly", + "Canary" + ], + "additionalCategories": [ + "encoding" + ], + "priority": 920, + "hidden": false +} \ No newline at end of file diff --git a/player/caption-styling/css/style.css b/player/caption-styling/css/style.css index 3d433ad1..7dd82d49 100644 --- a/player/caption-styling/css/style.css +++ b/player/caption-styling/css/style.css @@ -8,6 +8,10 @@ font-size: 18px; } +.cc-demo p a { + font-size: 18px; +} + #player { margin-bottom: 20px; } diff --git a/player/caption-styling/info.json b/player/caption-styling/info.json new file mode 100644 index 00000000..4c4efcc0 --- /dev/null +++ b/player/caption-styling/info.json @@ -0,0 +1,22 @@ +{ + "title": "CEA-608/708 captions and styling", + "description": "This demo shows the Bitmovin Player displaying a video with captions and offering all the controls necessary to be compliant with CEA-708", + "long_description": "This demo shows the Bitmovin Player displaying a video with captions and offering all the controls necessary to be compliant with CEA-708.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "demo.js" + ] + }, + "tags": [ + "captions", + "cea-708", + "basic", + "cea styling" + ] +} \ No newline at end of file diff --git a/player/channel-switching/index.html b/player/channel-switching/index.html index 1664b4d9..ab137b1a 100644 --- a/player/channel-switching/index.html +++ b/player/channel-switching/index.html @@ -27,16 +27,13 @@ Click a button to show switch time.

- +
- +
- +
diff --git a/player/channel-switching/info.json b/player/channel-switching/info.json new file mode 100644 index 00000000..75e34420 --- /dev/null +++ b/player/channel-switching/info.json @@ -0,0 +1,22 @@ +{ + "title": "Fast Channel Switching", + "description": "Switch between two channels without destroying the player and speeding up the process", + "long_description": "This interactive video demo showcases the Bitmovin Player’s ability to switch between channels, quickly and seamlessly. Try this three channel demo.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js", + "switchChannel.js" + ] + }, + "tags": [ + "switch", + "load", + "channel" + ] +} \ No newline at end of file diff --git a/player/channel-switching/js/script.js b/player/channel-switching/js/script.js index 5a2906f8..b357e936 100644 --- a/player/channel-switching/js/script.js +++ b/player/channel-switching/js/script.js @@ -74,6 +74,19 @@ function resetDiff() { switchTime = null; } +document.getElementById('ch1').addEventListener('click', function(event) { + switchChannel('1', event); +}); + +document.getElementById('ch2').addEventListener('click', function(event) { + switchChannel('2', event); +}); + +document.getElementById('ch3').addEventListener('click', function(event) { + switchChannel('3', event); +}); + + function switchChannel(channelID, event) { var delay = 0; diff --git a/player/chromecast/caf.js b/player/chromecast/caf.js new file mode 100644 index 00000000..2bb24844 --- /dev/null +++ b/player/chromecast/caf.js @@ -0,0 +1,13 @@ +var conf = { + key: '', + remotecontrol: { + type: 'googlecast', + receiverApplicationId: 'FFE417E5', // this id points to the Bitmovin default receiver application + receiverVersion: 'v3', + messageNamespace: 'urn:x-cast:com.bitmovin.player.caf', + }, +}; + +// Send custom messages to CAF receiver +var payload = { foo: 'bar' }; +player.addMetadata('CAST', payload); diff --git a/player/chromecast/index.html b/player/chromecast/index.html index 14348366..aa04f0cd 100644 --- a/player/chromecast/index.html +++ b/player/chromecast/index.html @@ -23,7 +23,10 @@

Streaming to Chromecast

to have the Google Cast extension installed in your browser. - If you are having troubles setting up your Chromecast device, please refer to pinning Chromecast icon to the Chrome toolbar for more convenience. + If you are having trouble setting up your Chromecast device, please refer to this guide.

@@ -45,26 +48,61 @@

1. Click the Chromecast icon

2. Choose your target device

- -

- Click on one of the listed Chromecast devices to start casting. + A popup will appear next to the Chromecast icon in the Chrome toolbar. Click on one of the listed devices to start casting.

3. Control the stream

- -

- You can control and stop the streamed video through the native Chromecast menu. + You can control the streamed video (set volume and subtitles, seek content, pause, play etc.) through the regular player controls in the browser.

+

4. Stop casting

+

+ + + +

+

+ To stop casting click on the cast icon in the player or Chrome tab directly and then select currently playing device to stop. +

+ + + +
+
+

Cast to a Cast Application Framework (CAF) compatible receiver

+ +

+ By setting receiverVersion to v3 in the remotecontrol configuration the Bitmovin Player is able to cast to CAF receivers. + The receiverApplicationId must belong to a valid CAF receiver, like the Bitmovin CAF Receiver. +

+ +

+ By utilizing the addMetadata Bitmovin Player API + it is possible to send custom messages from the player to the cast receiver. + When sending custom messages, messageNamespace must be the same value as registered on the receiver side. +

+ +

+ When casting to a CAF receiver, the current DRM configuration is automatically taken from the player's source. +

+
+
+ ${code:caf.js}
diff --git a/player/chromecast/info.json b/player/chromecast/info.json new file mode 100644 index 00000000..e1cb8a36 --- /dev/null +++ b/player/chromecast/info.json @@ -0,0 +1,24 @@ +{ + "title": "Chromecast", + "description": "Cast video directly to your television screen using Chromecast and the Bitmovin Player", + "long_description": "The Chromecast Player allows you to cast directly from your device to your television screen using the Chromecast browser plugin and a Chromecast enabled display device.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "demo.js", + "caf.js" + ] + }, + "tags": [ + "chromecast", + "television", + "cast", + "caf" + ], + "priority": 820 +} \ No newline at end of file diff --git a/player/chromecast/info.yaml b/player/chromecast/info.yaml index 664f665c..97163620 100644 --- a/player/chromecast/info.yaml +++ b/player/chromecast/info.yaml @@ -11,10 +11,12 @@ code: language: js files: - demo.js + - caf.js tags: - chromecast - television - cast + - caf priority: 820 diff --git a/player/chromeless/css/style.css b/player/chromeless/css/style.css index 8f491894..150b4dd7 100644 --- a/player/chromeless/css/style.css +++ b/player/chromeless/css/style.css @@ -6,6 +6,14 @@ body .demo-detail .code-example { margin-top: 0; } +li span { + font-size: 18px; +} + +a { + font-size: 18px; +} + @media (min-width: 1200px) { .player-col { float: left; diff --git a/player/chromeless/info.json b/player/chromeless/info.json new file mode 100644 index 00000000..776610f1 --- /dev/null +++ b/player/chromeless/info.json @@ -0,0 +1,22 @@ +{ + "title": "Chromeless Player", + "description": "This demo shows how the player can work without an UI", + "long_description": "This demo showcases how the Bitmovin Player can be controlled completely via the API. The code example gives you the configuration settings required.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "demo.js" + ] + }, + "tags": [ + "UI", + "chromeless", + "headless", + "basic" + ] +} \ No newline at end of file diff --git a/player/custom-adaptation/info.json b/player/custom-adaptation/info.json new file mode 100644 index 00000000..04b30453 --- /dev/null +++ b/player/custom-adaptation/info.json @@ -0,0 +1,23 @@ +{ + "title": "Custom Adaptation", + "description": "Showcasing the player's ability to switch between bitrates to avoid re-buffering, minimize startup time, and provide the best possible quality", + "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" + ] + }, + "tags": [ + "adaptation logic", + "adaption", + "bitrate", + "quality-switching" + ], + "priority": 800 +} \ No newline at end of file diff --git a/player/custom-adaptation/js/script.js b/player/custom-adaptation/js/script.js index bf6c487c..c16400dd 100644 --- a/player/custom-adaptation/js/script.js +++ b/player/custom-adaptation/js/script.js @@ -93,7 +93,7 @@ }; var conf = { - key: '89f6ed6c-ab0e-46c2-ac47-5665e60c3c41', + key: '29ba4a30-8b5e-4336-a7dd-c94ff3b25f30', analytics: { key: '45adcf9b-8f7c-4e28-91c5-50ba3d442cd4', videoId: 'custom-adaptation' diff --git a/player/custom-quality-labels/info.json b/player/custom-quality-labels/info.json new file mode 100644 index 00000000..07e92a23 --- /dev/null +++ b/player/custom-quality-labels/info.json @@ -0,0 +1,19 @@ +{ + "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" + ] +} \ No newline at end of file diff --git a/player/drm/css/style.css b/player/drm/css/style.css index 2c69cc20..f89a9b23 100644 --- a/player/drm/css/style.css +++ b/player/drm/css/style.css @@ -52,10 +52,12 @@ body .demo-detail .code-example { .code ul li.supported, .yes { color: rgb(0, 148, 227); + font-size: 18px; } .code ul li.unsupported, .no { color: rgb(160, 160, 160); + font-size: 18px; } .code ul li::before { diff --git a/player/drm/info.json b/player/drm/info.json new file mode 100644 index 00000000..8a4a7037 --- /dev/null +++ b/player/drm/info.json @@ -0,0 +1,22 @@ +{ + "title": "DRM stream test", + "description": "Test your protected DRM stream with the Bitmovin Player", + "long_description": "Test your protected DRM stream live with the Bitmovin Player and get immediate insights into which DRM system and codecs are supported by your browser.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "demo.js" + ] + }, + "tags": [ + "drm", + "widevine", + "playready" + ], + "priority": 880 +} \ No newline at end of file diff --git a/player/frame-accurate-seeking/info.json b/player/frame-accurate-seeking/info.json new file mode 100644 index 00000000..25925ef9 --- /dev/null +++ b/player/frame-accurate-seeking/info.json @@ -0,0 +1,12 @@ +{ + "title": "Frame Accurate Seeking", + "description": "Enable users to quickly scan and find the exact scene or frame they're looking for", + "long_description": "Test long description.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "tags": [ + "TestTag" + ] +} \ No newline at end of file diff --git a/player/hls-fmp4/css/style.css b/player/hls-fmp4/css/style.css index d8b828d8..295fa22d 100644 --- a/player/hls-fmp4/css/style.css +++ b/player/hls-fmp4/css/style.css @@ -6,6 +6,10 @@ body .demo-detail .code-example { margin-top: 0; } +a { + font-size: 18px; +} + @media (min-width: 1200px) { .player-col { float: left; diff --git a/player/hls-fmp4/info.json b/player/hls-fmp4/info.json new file mode 100644 index 00000000..b5692448 --- /dev/null +++ b/player/hls-fmp4/info.json @@ -0,0 +1,23 @@ +{ + "title": "HLS fragmented MP4", + "description": "The Bitmovin Player fully supports fragmented MP4 in HLS", + "long_description": "This demo showcases HLS content using fragmented MP4 (fMP4) being played by the Bitmovin Player, bringing you the advantage of reducing storage cost.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "demo.js" + ] + }, + "tags": [ + "fMP4", + "fragmented", + "MP4", + "HLS", + "basic" + ] +} \ No newline at end of file diff --git a/player/low-latency-streaming/index.html b/player/low-latency-streaming/index.html index ecf5292c..40146a5d 100644 --- a/player/low-latency-streaming/index.html +++ b/player/low-latency-streaming/index.html @@ -6,7 +6,7 @@
    -
  • Reduce latency for Live streams from 30 seconds to 2-3 seconds
    • +
  • Reduce latency for Live streams from 30 seconds to 5-10 seconds
  • Target latency is configurable
  • Compatible with chunked CMAF MPEG-DASH streams
  • Available on Web and Mobile SDKs
    • diff --git a/player/low-latency-streaming/info.json b/player/low-latency-streaming/info.json new file mode 100644 index 00000000..ed15407c --- /dev/null +++ b/player/low-latency-streaming/info.json @@ -0,0 +1,18 @@ +{ + "title": "Low Latency Streaming", + "description": "Reduce latency during live streaming events and increase fan engagement", + "long_description": [ + "reduce latency from 30 seconds to 5 seconds", + "available on Web and Mobile platforms", + "monitor playback performance with Bitmovin Analytics" + ], + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "tags": [ + "Cmaf low latency", + "live latency" + ], + "priority": 890 +} \ No newline at end of file diff --git a/player/low-latency-streaming/js/script.js b/player/low-latency-streaming/js/script.js index 68ade3ec..acb32c54 100644 --- a/player/low-latency-streaming/js/script.js +++ b/player/low-latency-streaming/js/script.js @@ -40,7 +40,7 @@ slider.oninput = updateTargetLatency; slider.value = String(targetLatency); var conf = { - key: '89f6ed6c-ab0e-46c2-ac47-5665e60c3c41', + key: '29ba4a30-8b5e-4336-a7dd-c94ff3b25f30', analytics: { key: '45adcf9b-8f7c-4e28-91c5-50ba3d442cd4', videoId: 'low-latency-streaming' diff --git a/player/modular-player/css/style.css b/player/modular-player/css/style.css index 19c9e096..8c2ff454 100644 --- a/player/modular-player/css/style.css +++ b/player/modular-player/css/style.css @@ -15,6 +15,16 @@ color: black; } + +.image-swap .btn { + white-space: nowrap; +} + +.accordion>.card:not(:last-of-type){ + border-bottom: 1px solid rgba(0,0,0,.125) !important; + margin-bottom: .5rem !important; +} + @media (min-width: 1200px) { .size-small { display: none !important; diff --git a/player/modular-player/info.json b/player/modular-player/info.json new file mode 100644 index 00000000..abf132e2 --- /dev/null +++ b/player/modular-player/info.json @@ -0,0 +1,15 @@ +{ + "title": "Modular Player", + "description": "Modular approach improves Bitmovin Player speed", + "long_description": "The Bitmovin Player is a modular player, so you dramatically can reduce the file size and speed up your pages by just using what you need.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "tags": [ + "modular", + "reduce size" + ], + "priority": 960, + "hide_github_link": true +} \ No newline at end of file diff --git a/player/multi-audio-tracks/info.json b/player/multi-audio-tracks/info.json new file mode 100644 index 00000000..e9aee2d1 --- /dev/null +++ b/player/multi-audio-tracks/info.json @@ -0,0 +1,23 @@ +{ + "title": "Multiple Audio Tracks & Multiple Subtitles", + "description": "Display multi language and audio options available with the Bitmovin player", + "long_description": "Bitmovin supports multiple audio/language tracks, without the need of duplication or repackaging the video, either for live or on-demand content. Try the demo.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js" + ] + }, + "tags": [ + "multi", + "audio", + "language", + "basic", + "subtitle" + ] +} \ No newline at end of file diff --git a/player/native-sdks/info.json b/player/native-sdks/info.json new file mode 100644 index 00000000..3185f010 --- /dev/null +++ b/player/native-sdks/info.json @@ -0,0 +1,50 @@ +{ + "title": "Native Player SDKs", + "description": "Deliver High Quality Video Everywhere with Bitmovin's Native Player SDKs", + "long_description": "Bitmovin’s Native SDKs give you everything you need to get your video playing anywhere, any device, any platform.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "hide_github_link": true, + "buttons": [ + { + "name": "native-sdks-player-ios-samples", + "text": "See iOS Samples", + "url": "https://github.com/bitmovin/bitmovin-player-ios-samples", + "icon": "apple" + }, + { + "name": "native-sdks-player-android-samples", + "text": "See Android Samples", + "url": "https://github.com/bitmovin/bitmovin-player-android-samples", + "icon": "android" + } + ], + "tags": [ + "native", + "sdks", + "sdk", + "os", + "apple", + "google", + "samsung", + "lg", + "amazon", + "fire", + "roku", + "playstation", + "andriod", + "ios", + "mac", + "macos", + "smart", + "tv", + "opera", + "chrome", + "firefox", + "edge", + "sfari", + "internet explorer" + ] +} \ No newline at end of file diff --git a/player/native-sdks/js/script.js b/player/native-sdks/js/script.js index a8baa9b3..507f207e 100644 --- a/player/native-sdks/js/script.js +++ b/player/native-sdks/js/script.js @@ -1,4 +1,4 @@ -conf = { +var conf = { key: '29ba4a30-8b5e-4336-a7dd-c94ff3b25f30', analytics: { key: '45adcf9b-8f7c-4e28-91c5-50ba3d442cd4', diff --git a/player/overlay-ad/info.json b/player/overlay-ad/info.json new file mode 100644 index 00000000..2588fdbe --- /dev/null +++ b/player/overlay-ad/info.json @@ -0,0 +1,23 @@ +{ + "title": "Overlay Ad", + "description": "Enable static ads in the video player", + "long_description": "To be defined.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js" + ] + }, + "tags": [ + "advertisement", + "overlay", + "VAST", + "VPAID" + ], + "priority": 850 +} \ No newline at end of file diff --git a/player/picture-in-picture/index.html b/player/picture-in-picture/index.html index 029d0577..cdbd98fd 100644 --- a/player/picture-in-picture/index.html +++ b/player/picture-in-picture/index.html @@ -48,7 +48,7 @@

    React to the scrolling of the document:

    Adjust player size and position via CSS

    - ${code:magic.css:css} + ${code:magic.css}
diff --git a/player/picture-in-picture/info.json b/player/picture-in-picture/info.json new file mode 100644 index 00000000..5e14eb74 --- /dev/null +++ b/player/picture-in-picture/info.json @@ -0,0 +1,25 @@ +{ + "title": "Picture in Picture", + "description": "Showcases the ability to keep a minimized player in the corner of your screen when you scroll too far", + "long_description": "Picture in picture is a great feature for screens with more content than just the video, or screens with multiple videos. See it in action here.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js", + "scrollListener.js", + "magic.css" + ] + }, + "tags": [ + "picture", + "mini", + "advanced", + "PiP", + "sticky" + ] +} \ No newline at end of file diff --git a/player/picture-in-picture/info.yaml b/player/picture-in-picture/info.yaml index 31162254..3a2bf626 100644 --- a/player/picture-in-picture/info.yaml +++ b/player/picture-in-picture/info.yaml @@ -12,7 +12,7 @@ code: files: - setup.js - scrollListener.js - - magic.css:css + - magic.css tags: - picture diff --git a/player/picture-in-picture/js/script.js b/player/picture-in-picture/js/script.js index 1096b12e..e99532b3 100644 --- a/player/picture-in-picture/js/script.js +++ b/player/picture-in-picture/js/script.js @@ -51,6 +51,10 @@ function adjustPlayer() { var container = $('.player-container'); + if(container.length === 0) { + return; + } + // extract constants for better readabilty var lowerEdge = container.offset().top + container.height(); var switchToMinPlayerPos = lowerEdge - (window.innerHeight / 3); diff --git a/player/player-ui-styling/css/style.css b/player/player-ui-styling/css/style.css index 10f4b749..d535444e 100644 --- a/player/player-ui-styling/css/style.css +++ b/player/player-ui-styling/css/style.css @@ -2,6 +2,10 @@ margin-bottom: 20px; } +a { + font-size: 18px; +} + @media (min-width: 1200px) { .code-col { float: right; diff --git a/player/player-ui-styling/index.html b/player/player-ui-styling/index.html index c73dcf99..36dcab6e 100644 --- a/player/player-ui-styling/index.html +++ b/player/player-ui-styling/index.html @@ -25,33 +25,33 @@
-
-
-
-
-
-
diff --git a/player/player-ui-styling/info.json b/player/player-ui-styling/info.json new file mode 100644 index 00000000..ed565525 --- /dev/null +++ b/player/player-ui-styling/info.json @@ -0,0 +1,23 @@ +{ + "title": "UI Styling", + "description": "Learn how you can entirely control the styling of the player UI", + "long_description": "A unified UI config ensures that your player will look the same, regardless of which device or platform it is rendered on. Try the interactive demo.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "playerManaged.js", + "externallyManaged.js", + "cssOverloading.js" + ] + }, + "tags": [ + "styling", + "css", + "UI" + ] +} \ No newline at end of file diff --git a/player/player-ui-styling/js/script.js b/player/player-ui-styling/js/script.js index 9c20723d..7c4d2dfe 100644 --- a/player/player-ui-styling/js/script.js +++ b/player/player-ui-styling/js/script.js @@ -25,7 +25,8 @@ player.load(source).then(function () { currentUiManager = bitmovin.playerui.UIFactory.buildDefaultUI(player); }); -function toggleSmallScreenUI() { + +document.getElementById('smallscreen').addEventListener('click', function() { currentUiManager.release(); if (!isSmallscreen) { currentUiManager = bitmovin.playerui.UIFactory.buildModernSmallScreenUI(player); @@ -33,28 +34,30 @@ function toggleSmallScreenUI() { currentUiManager = bitmovin.playerui.UIFactory.buildDefaultUI(player); } isSmallscreen = !isSmallscreen; -} +}); + -function toggleWatermark() { +document.getElementById('watermark').addEventListener('click', function() { $('.bmpui-ui-watermark').toggle(); -} +}); -function giantSeekBar() { + +document.getElementById('bigseek').addEventListener('click', function() { $('.bmpui-ui-seekbar').css('font-size', isBigSeekbar ? '1em' : '3em'); isBigSeekbar = !isBigSeekbar; -} +}); -function toGreen() { - toggleColorClass('green', '.bmpui-seekbar-backdrop') -} +document.getElementById('color2').addEventListener('click', function() { + toggleColorClass('green', '.bmpui-seekbar-backdrop'); +}); -function toOrange() { - toggleColorClass('orange', '.bmpui-seekbar-backdrop') -} +document.getElementById('color1').addEventListener('click', function() { + toggleColorClass('orange', '.bmpui-seekbar-backdrop'); +}); -function toggleRedBufferLevel() { +document.getElementById('redbuffer').addEventListener('click', function() { toggleColorClass('red', '.bmpui-seekbar-bufferlevel') -} +}); function toggleColorClass(colorClassName, elementClass) { var allElements = document.querySelectorAll(elementClass); diff --git a/player/preload-vod/css/style.css b/player/preload-vod/css/style.css index e69de29b..36e018f6 100644 --- a/player/preload-vod/css/style.css +++ b/player/preload-vod/css/style.css @@ -0,0 +1,3 @@ +span { + font-size: 18px; +} \ No newline at end of file diff --git a/player/preload-vod/info.json b/player/preload-vod/info.json new file mode 100644 index 00000000..efa37cd4 --- /dev/null +++ b/player/preload-vod/info.json @@ -0,0 +1,20 @@ +{ + "title": "Preload VoD", + "description": "Enable users to instantly start watching their content without buffering or waiting", + "long_description": "To be defined.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js" + ] + }, + "tags": [ + "preload", + "vod" + ] +} \ No newline at end of file diff --git a/player/ssai/css/style.css b/player/ssai/css/style.css index fa74886e..bca7db2a 100644 --- a/player/ssai/css/style.css +++ b/player/ssai/css/style.css @@ -14,6 +14,10 @@ body .demo-detail .code-example { margin-top: 0; } +a { + font-size: 18px; +} + @media (max-width: 1200px) { .lgImg { display: none; diff --git a/player/ssai/info.json b/player/ssai/info.json new file mode 100644 index 00000000..7b905bf3 --- /dev/null +++ b/player/ssai/info.json @@ -0,0 +1,23 @@ +{ + "title": "Server Side Ad Insertion", + "description": "A demo of how you can use server side ad insertion with the player", + "long_description": "Ad Blocking software has had a major impact on ad revenue across the entire video industry. Server-Side Ad Insertion offers a way to bypass Ad Blockers.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "demo.js" + ] + }, + "tags": [ + "advertissement", + "server side", + "ssai", + "ads" + ], + "priority": 840 +} \ No newline at end of file diff --git a/player/stream-test/info.json b/player/stream-test/info.json new file mode 100644 index 00000000..7ac1dc46 --- /dev/null +++ b/player/stream-test/info.json @@ -0,0 +1,22 @@ +{ + "title": "DASH, HLS or PROGRESSIVE stream test", + "description": "Test your own stream with the Bitmovin Player", + "long_description": "Simply paste the link to your video file to test your own stream with the Bitmovin Player. Playback in any browser and any device, fast start up, no buffering.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": false, + "language": "js" + }, + "tags": [ + "dash", + "hls", + "stream", + "basic", + "test", + "player" + ], + "priority": 900 +} \ No newline at end of file diff --git a/player/stream-test/js/script.js b/player/stream-test/js/script.js index 613f621b..c78f1e4e 100644 --- a/player/stream-test/js/script.js +++ b/player/stream-test/js/script.js @@ -1,4 +1,4 @@ -window.onload = function getURLParams() { +function getURLParams() { var manifestParam = getParamsQueryString('manifest'); var streamFormatParam = getParamsQueryString('format'); var licenseParam = getParamsQueryString('license'); @@ -790,3 +790,4 @@ function handleError(error, type) { } setupChart(); +getURLParams(); diff --git a/player/thumbnail-seeking/css/style.css b/player/thumbnail-seeking/css/style.css index 451464e7..2e41be4e 100644 --- a/player/thumbnail-seeking/css/style.css +++ b/player/thumbnail-seeking/css/style.css @@ -1,3 +1,6 @@ +a { + font-size: 18px; +} @media (min-width: 1200px) { body .demo-detail .code-example { margin-top: 0; diff --git a/player/thumbnail-seeking/info.json b/player/thumbnail-seeking/info.json new file mode 100644 index 00000000..dba359ad --- /dev/null +++ b/player/thumbnail-seeking/info.json @@ -0,0 +1,23 @@ +{ + "title": "Thumbnail seeking", + "description": "Display thumbnails over the seek bar to show a preview of the video at seeked time", + "long_description": "Display thumbnails over the seek bar to show a preview of the video as the timeline is moved. This Bitmovin Player demonstration includes a working thumbnail demo.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "setup.js", + "tracks.js" + ] + }, + "tags": [ + "thumbnail", + "seek", + "preview", + "basic" + ] +} \ No newline at end of file diff --git a/player/variable-playback-speed/info.json b/player/variable-playback-speed/info.json new file mode 100644 index 00000000..1a7608c9 --- /dev/null +++ b/player/variable-playback-speed/info.json @@ -0,0 +1,20 @@ +{ + "title": "Variable Playback Speed", + "description": "Change the playback speed of content", + "long_description": "Bitmovin Player gives you the option to control the playback speed. This can be useful for many applications. Try the demo.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "demo.js" + ] + }, + "tags": [ + "playback speed", + "dynamic" + ] +} \ No newline at end of file diff --git a/player/vr-360/css/style.css b/player/vr-360/css/style.css index f6a29173..b9249c98 100644 --- a/player/vr-360/css/style.css +++ b/player/vr-360/css/style.css @@ -2,6 +2,10 @@ body .vr-demo p { font-size: 18px; } +body .vr-demo p a { + font-size: 18px; +} + div.input-hint { display: none; } diff --git a/player/vr-360/info.json b/player/vr-360/info.json new file mode 100644 index 00000000..6367339e --- /dev/null +++ b/player/vr-360/info.json @@ -0,0 +1,22 @@ +{ + "title": "VR & 360°", + "description": "This demo shows the Bitmovin Player displaying a 360° video with VR", + "long_description": "The Bitmovin Player was the first player on the market to achieve complete cross browser compatibility, and is still leading the way in features and performance.", + "executable": { + "executable": true, + "indexfile": "index.html" + }, + "code": { + "show_code": true, + "language": "js", + "files": [ + "demo.js" + ] + }, + "tags": [ + "VR", + 360, + "3D" + ], + "priority": 780 +} \ No newline at end of file From 811fb0b1a18a2c6f12b52efaecf82595e78b726f Mon Sep 17 00:00:00 2001 From: Nikola Nikushev Date: Wed, 24 Feb 2021 17:42:55 +0100 Subject: [PATCH 2/6] Updated readme styling and section contents with latest readme version --- README.md | 125 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 75 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index a739caf8..4c567f8e 100644 --- a/README.md +++ b/README.md @@ -1,92 +1,117 @@ -**Don't create PRs for this project, demos are not in [demo-framework](https://github.com/bitmovin/demo-framework)** - # Bitmovin Demos [![bitmovin](http://bitmovin-a.akamaihd.net/webpages/bitmovin-logo-github.png)](http://www.bitmovin.com) -## How to write a demo +### Creating a demo +In order to create a new demo, you need to create a new folder (with new demo name) in either the +[demos/encoding](./demos/analytics), [demos/encoding](./demos/encoding) or [demos/player](./demos/player) folder, +depends on demo category, with the following contents: + +- `info.yaml` (required) - Demo configuration +- `index.html` (optional) - Entry point of the demo +- `icon.svg` (optional) - The demo icon +- `css/` (optional) - Add custom `.css` files withing this folder +- `js/` (optional) - Add custom `.js` files within this folder + +## How to publish / deploy a new demo into production + +Once a feature branch with your new demo is merged to `develop`, your changes will be built and published automatically to production by Netlify. + +--- -In order to create a new demo you need to create a new folder in either the encoding, -analytics, or player folder with the following contents: +## Demo `yaml.info` file structure - - `info.yaml` (required) - Demo configuration - - `index.html` (optional) - Entry point of the demo - - `icon.svg` (optional) - The demo icon - - `css/` (optional) - Add custom `.css` files withing this folder - - `js/` (optional) - Add custom `.js` files within this folder +This section will explain what information in your YAML file will be processed and how to create your own +Take an example xml like this one [player/drm/info.xml](./demos/player/drm/info.yaml) +### Minimal YAML File Example + +```yaml +title: Hello World +executable: + executable: false + indexfile: index.html +``` -## YAML File Structure -This section will explain what information in your YAML file will be processed and how +### YAML keys: #### `title` (string, required) + The title is used to display the demo in the overview and is rendered in the detail view as a header #### `description` (string, required) + An optional short description which will be displayed in the overview. In the detail view this description will only be rendered if there is no `
` in the demo's `index.html` file #### `executable` (list, optional) + A mandatory section defining the contents of the demo detail page - - `executable`: `true` or `false` - Specifies if the files should be rendered in native html and contain code - - `indexfile`: e.g. `index.html` - Sets the root file which is used to be rendered as the content of the demo - + +- `executable`: `true` or `false` + Specifies if the files should be rendered in native html and contain code +- `indexfile`: e.g. `index.html` + Sets the root file which is used to be rendered as the content of the demo + #### `code` (list, optional) + An optional section giving information about the code snippets which will be displayed on the demo detail page. - - `show_code`: `true` or `false` - Should code snippets be included - - `language`: e.g., `js`, `java`, `c` - The default language of the code snippets which will be used for the markup, supported languages can be found here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers - - `files` - a list of files which should be included as code snippets (**not** actually executed, but displayed in raw text. JavaScript code to be executed must go into `js/`). - These snippets will be displayed automatically at the end of the demo page, unless not specified elsewhere (see [Template Patterns](#template-patterns)). + +- `show_code`: `true` or `false` + Should code snippets be included +- `language`: e.g., `js`, `java`, `c` + The default language of the code snippets which will be used for the markup, supported languages can be found here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers +- `files` + a list of files which should be included as code snippets (**not** actually executed, but displayed in raw text. JavaScript code to be executed must go into `js/`). + These snippets will be displayed automatically at the end of the demo page, unless not specified elsewhere (see [Template Patterns](#demo-html-template-placeholders)). #### `tags` (list, optional) - An optional list of tags which are used to filter the overview. Categories will be automatically added as tag. + +An optional list of tags which are used to filter the overview. Categories will be automatically added as tag. #### `additionalCategories` (list, optional) - If your demo should show up in more than one category in the overview you can add the additional categories here. - The original category (the folder the demo lies in) is always included automatically. - Possible values are `analytics`, `encoding`, and `player` + +If your demo should show up in more than one category in the overview you can add the additional categories here. +The original category (the folder the demo lies in) is always included automatically. +Possible values are `analytics`, `encoding`, and `player` #### `priority` (number, optional) - Optional configuration that affects sorting. Defaults to `0`. + +The optional configuration that affects sorting. Defaults to `0`. #### `hide_github_link` (boolean, optional) - Remove the link to the GitHub repository by setting this to `true`. Defaults to `false`. + +Remove the link to the GitHub repository by setting this to `true`. Defaults to `false`. #### `buttons` (list, optional) + Add a list of buttons, where each entry should have the following data: - - `name` - A unique identifier - - `text` - Display text - - `url` - Go there on button click - - `name` - An icon name -## Minimal YAML File Example +- `name` + A unique identifier +- `text` + Display text +- `url` + Go there on button click +- `name` + An icon name -```yaml -title: Hello World -executable: - executable: false - indexfile: index.html -``` +## Demo HTML Template placeholders + +The following placeholders will be replaced in the demo's `index.html` page: -## Template Patterns -The following patterns will be replaced in the demo's index page: +### `${code:filename.ending:language}` -#### `${code:filename.ending:language}` To specify the location of code snippets (defined in `code.files` of `info.yaml`) to be displayed, use the following: + ``` ${code:myFile.css:css} ``` + > While the `:css` part may be omitted, it can be used to overwrite the default, set in `code.language` of `info.yaml`. -#### `

` +### `

` + If the demo template contains this element for the title, it will overwrite `title` from `info.yaml` -#### `
` +### `
` + Also `description` of `info.yaml` may be overwritten with a custom element. From 8925aacbfe616686f05c070e9dbd87d72765cf19 Mon Sep 17 00:00:00 2001 From: Nikola Nikushev Date: Wed, 24 Feb 2021 18:13:47 +0100 Subject: [PATCH 3/6] Updated readme reference to explain demos repository usage --- README.md | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 4c567f8e..e7e2b4e4 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,19 @@ # Bitmovin Demos [![bitmovin](http://bitmovin-a.akamaihd.net/webpages/bitmovin-logo-github.png)](http://www.bitmovin.com) -### Creating a demo +# Introduction +Welcome to Bitmovin demos. Our demo page is hosted at [bitmovin.com/demos](https://bitmovin.com/demos/). +This repository is used as a reference to integrating our player into your products. + +## Testing a demo + +If you wish to test a demo, you can either browse one of our demos hosted on our [demo page](https://bitmovin.com/demos/) or +navigate to a demo inside one of our products, for example [player/4k](./player/4k) and follow these steps: + 1. Copy the `index.html` + 1. Replace the`${code:setup.js}` (depending on the demo name may vary) with the contents, wrapping it with a `