diff --git a/README.md b/README.md index a739caf8..d28fc4e6 100644 --- a/README.md +++ b/README.md @@ -1,92 +1,123 @@ -**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 +# Introduction +Welcome to Bitmovin demos. Our demo page is hosted at [bitmovin.com/demos](https://bitmovin.com/demos/). +This repository is meant to be used as a reference when 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 ` +

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/info.yaml b/player/stream-test/info.yaml index 3a30faf0..fc91d8d5 100644 --- a/player/stream-test/info.yaml +++ b/player/stream-test/info.yaml @@ -18,4 +18,4 @@ tags: - test - player -priority: 900 +priority: 100 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