diff --git a/ads-dash.html b/ads-dash.html
new file mode 100644
index 0000000..c9ea1d7
--- /dev/null
+++ b/ads-dash.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Fire TV Demo App - Video ads with rmp-vast - DASH
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ads-ima-dash.html b/ads-ima-dash.html
new file mode 100644
index 0000000..ae7a95b
--- /dev/null
+++ b/ads-ima-dash.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Fire TV Demo App - Video ads with Google IMA - DASH
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ads-ima.html b/ads-ima.html
index 197903a..6a068a0 100644
--- a/ads-ima.html
+++ b/ads-ima.html
@@ -3,34 +3,33 @@
-
- Fire TV Demo App - Video ads with Google IMA
+
+ Fire TV Demo App - Video ads with Google IMA - CMAF HLS
-
-
+
+
diff --git a/ads.html b/ads.html
index 0d5d19e..746cfbb 100644
--- a/ads.html
+++ b/ads.html
@@ -3,35 +3,34 @@
-
- Fire TV Demo App - Video ads with rmp-vast
+
+ Fire TV Demo App - Video ads with rmp-vast - CMAF HLS
-
-
+
+
diff --git a/css/style.css b/css/style.css
index f2843bb..f39c4be 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,3 +11,29 @@ pre {
video::-webkit-media-controls-overlay-enclosure {
display: none !important;
}
+
+/*
+ * CSS for fine-tuning Radiant Media Player TV skin
+ */
+ .rmp-button.rmp-button-hover {
+ color: #ff1744;
+}
+
+.rmp-overlay-level.rmp-button-hover {
+ border-color: #ff1744;
+}
+
+/*
+ * When a module is open: keep the control bar visible to
+ * allow remote control navigation on control bar buttons
+ * also hide the play/pause button on top right corner
+ */
+.rmp-tv.rmp-module-open-ui .rmp-control-bar {
+ display: block !important;
+ opacity: 1 !important;
+ visibility: visible !important;
+}
+
+.rmp-tv .rmp-module-overlay-icons.rmp-module-overlay-play-pause {
+ display: none !important;
+}
diff --git a/low-latency-live-hls.html b/dash-av1.html
similarity index 56%
rename from low-latency-live-hls.html
rename to dash-av1.html
index db0573e..9ba230f 100644
--- a/low-latency-live-hls.html
+++ b/dash-av1.html
@@ -4,30 +4,30 @@
- Fire TV Demo App - Low Latency Live CMAF/fmp4 HLS AVC (H.264)
+ Fire TV Demo App - DASH VOD AV1
-
-
+
+
diff --git a/dash-hevc.html b/dash-hevc.html
new file mode 100644
index 0000000..896ab59
--- /dev/null
+++ b/dash-hevc.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Fire TV Demo App - DASH VOD HEVC
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dash-maudios-mcaptions.html b/dash-maudios-mcaptions.html
deleted file mode 100644
index 182b1f1..0000000
--- a/dash-maudios-mcaptions.html
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
-
- Fire TV Demo App - DASH VOD VP9/AVC with multiple audios and multiple captions
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/dash-vp9.html b/dash-vp9.html
index 07924e8..b208b92 100644
--- a/dash-vp9.html
+++ b/dash-vp9.html
@@ -3,21 +3,20 @@
-
+
Fire TV Demo App - DASH VP9 VOD
-
-
+
+
diff --git a/dash.html b/dash.html
index eb8cdc7..d4f781b 100644
--- a/dash.html
+++ b/dash.html
@@ -3,21 +3,20 @@
-
+
Fire TV Demo App - DASH VOD AVC (H.264)
-
-
+
+
diff --git a/fmp4-hls.html b/fmp4-hls.html
index 2f52fc9..034810a 100644
--- a/fmp4-hls.html
+++ b/fmp4-hls.html
@@ -3,21 +3,20 @@
-
+
Fire TV Demo App - CMAF/fmp4 HLS VOD AVC (H.264)
-
-
+
+
diff --git a/hls.html b/hls.html
deleted file mode 100644
index 3edba06..0000000
--- a/hls.html
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
-
- Fire TV Demo App - HLS-TS VOD AVC (H.264)
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/index.html b/index.html
index 63a16be..d428077 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,9 @@
-
+
Fire TV app - Radiant Media Player
-
+
@@ -34,27 +32,28 @@ VOD
Live
Video advertisement (VAST)
Environment
-
- Radiant Media Player
Environment API
diff --git a/js/player-live.js b/js/player-live.js
new file mode 100644
index 0000000..112ba75
--- /dev/null
+++ b/js/player-live.js
@@ -0,0 +1,121 @@
+var playerButtons = [
+ { id: 0, name: 'playPause', element: null }
+];
+
+var container = document.getElementById('rmp');
+var currentActiveButtonId;
+var currentActiveButton;
+
+var _createEvent = function (eventName, element) {
+ var event;
+ if (element) {
+ try {
+ event = new Event(eventName);
+ element.dispatchEvent(event);
+ } catch (e) {
+ console.trace(e);
+ }
+ }
+};
+
+// handle requests from TV remote
+var _removeHoverClass = function () {
+ for (var i = 0, len = playerButtons.length; i < len; i++) {
+ playerButtons[i].element.classList.remove('rmp-button-hover');
+ }
+};
+
+var _setActiveButton = function (id) {
+ currentActiveButtonId = id;
+ playerButtons[id].element.classList.add('rmp-button-hover');
+};
+
+var _handleButtons = function (keyCode) {
+ currentActiveButton = container.querySelector('.rmp-button-hover');
+ _removeHoverClass();
+ var newId;
+ switch (keyCode) {
+ case 38: // ArrowUp
+ case 39: // ArrowRight
+ if (playerButtons[currentActiveButtonId + 1]) {
+ newId = currentActiveButtonId + 1;
+ } else {
+ newId = 0;
+ }
+ break;
+ case 37: // ArrowLeft
+ case 40: // ArrowDown
+ if (playerButtons[currentActiveButtonId - 1]) {
+ newId = currentActiveButtonId - 1;
+ } else {
+ newId = playerButtons.length - 1;
+ }
+ break;
+ }
+ _setActiveButton(newId);
+};
+
+var _triggerButton = function () {
+ currentActiveButton = container.querySelector('.rmp-button-hover');
+ _createEvent('click', currentActiveButton);
+};
+
+var isPaused;
+
+var _onKeyDown = function (event) {
+ event.stopPropagation();
+ event.preventDefault();
+ var keyCode = event.keyCode;
+ window.console.log('Key code called : ' + keyCode);
+ window.rmp.setControlsVisible(true);
+ switch (keyCode) {
+ case 179: // PLAY_PAUSE
+ isPaused = window.rmp.getPaused();
+ if (window.rmp.getAdOnStage() && window.rmp.getAdLinear()) {
+ isPaused = window.rmp.getAdPaused();
+ }
+ if (isPaused) {
+ window.rmp.play();
+ } else {
+ window.rmp.pause();
+ }
+ break;
+ case 37: // ArrowLeft
+ case 38: // ArrowUp
+ case 39: // ArrowRight
+ case 40: // ArrowDown
+ _handleButtons(keyCode);
+ break;
+ case 13: // Enter
+ _triggerButton();
+ break;
+ default:
+ break;
+ }
+};
+// https://developer.amazon.com/docs/fire-tv/web-app-faq.html
+// workaround for capturing Amazon Remote Back button behavior for a web app
+window.addEventListener('load', function () {
+ window.addEventListener('popstate', function () {
+ if (window.history.state !== 'backhandler') {
+ window.history.pushState('backhandler', null, null);
+ window.location.replace('index.html');
+ }
+ });
+ window.history.pushState('backhandler', null, null);
+});
+
+// when player reaches durationchange we wire the UI
+container.addEventListener('loadeddata', function () {
+ playerButtons[0].element = container.querySelector('.rmp-play-pause');
+ playerButtons[0].element.setAttribute('data-button-id', '0');
+ document.body.addEventListener('keydown', _onKeyDown);
+ _setActiveButton(0);
+ currentActiveButton = container.querySelector('.rmp-button-hover');
+});
+
+/* needed to avoid double event firing on remote interaction */
+/*document.addEventListener('keypress', function (event) {
+ event.stopPropagation();
+ event.preventDefault();
+});*/
diff --git a/js/player.js b/js/player.js
index 62bb0a9..9e43c10 100644
--- a/js/player.js
+++ b/js/player.js
@@ -1,21 +1,83 @@
-let isPaused;
+var playerButtons = [
+ { id: 0, name: 'fastRewind', element: null },
+ { id: 1, name: 'quickRewind', element: null },
+ { id: 2, name: 'playPause', element: null },
+ { id: 3, name: 'quickForward', element: null },
+ { id: 4, name: 'fastForward', element: null }
+];
-const _onKeyUp = function (event) {
+var container = document.getElementById('rmp');
+var currentActiveButtonId;
+var currentActiveButton;
+
+var _createEvent = function (eventName, element) {
+ var event;
+ if (element) {
+ try {
+ event = new Event(eventName);
+ element.dispatchEvent(event);
+ } catch (e) {
+ console.trace(e);
+ }
+ }
+};
+
+// handle requests from TV remote
+var _removeHoverClass = function () {
+ for (var i = 0, len = playerButtons.length; i < len; i++) {
+ playerButtons[i].element.classList.remove('rmp-button-hover');
+ }
+};
+
+var _setActiveButton = function (id) {
+ currentActiveButtonId = id;
+ playerButtons[id].element.classList.add('rmp-button-hover');
+};
+
+var _handleButtons = function (keyCode) {
+ currentActiveButton = container.querySelector('.rmp-button-hover');
+ _removeHoverClass();
+ var newId;
+ switch (keyCode) {
+ case 38: // ArrowUp
+ case 39: // ArrowRight
+ if (playerButtons[currentActiveButtonId + 1]) {
+ newId = currentActiveButtonId + 1;
+ } else {
+ newId = 0;
+ }
+ break;
+ case 37: // ArrowLeft
+ case 40: // ArrowDown
+ if (playerButtons[currentActiveButtonId - 1]) {
+ newId = currentActiveButtonId - 1;
+ } else {
+ newId = playerButtons.length - 1;
+ }
+ break;
+ }
+ _setActiveButton(newId);
+};
+
+var _triggerButton = function () {
+ currentActiveButton = container.querySelector('.rmp-button-hover');
+ _createEvent('click', currentActiveButton);
+};
+
+var isPaused;
+
+var _onKeyDown = function (event) {
event.stopPropagation();
event.preventDefault();
- const currentTime = window.rmp.getCurrentTime();
- const keyCode = event.keyCode;
+ var keyCode = event.keyCode;
window.console.log('Key code called : ' + keyCode);
window.rmp.setControlsVisible(true);
switch (keyCode) {
case 227: // REWIND
- window.rmp.seekTo(currentTime - 10000);
+ window.rmp.fastRewind();
break;
case 228: // FAST_FORWARD
- window.rmp.seekTo(currentTime + 10000);
- break;
- case 8: // BACK
- window.location.replace('index.html');
+ window.rmp.fastForward();
break;
case 179: // PLAY_PAUSE
isPaused = window.rmp.getPaused();
@@ -28,15 +90,50 @@ const _onKeyUp = function (event) {
window.rmp.pause();
}
break;
+ case 37: // ArrowLeft
+ case 38: // ArrowUp
+ case 39: // ArrowRight
+ case 40: // ArrowDown
+ _handleButtons(keyCode);
+ break;
+ case 13: // Enter
+ _triggerButton();
+ break;
default:
break;
}
};
+// https://developer.amazon.com/docs/fire-tv/web-app-faq.html
+// workaround for capturing Amazon Remote Back button behavior for a web app
+window.addEventListener('load', function () {
+ window.addEventListener('popstate', function () {
+ if (window.history.state !== 'backhandler') {
+ window.history.pushState('backhandler', null, null);
+ window.location.replace('index.html');
+ }
+ });
+ window.history.pushState('backhandler', null, null);
+});
-document.addEventListener('keyup', _onKeyUp);
+// when player reaches durationchange we wire the UI
+container.addEventListener('loadeddata', function () {
+ playerButtons[0].element = container.querySelector('.rmp-fast-rewind');
+ playerButtons[0].element.setAttribute('data-button-id', '0');
+ playerButtons[1].element = container.querySelector('.rmp-i-quick-rewind-tv');
+ playerButtons[1].element.setAttribute('data-button-id', '1');
+ playerButtons[2].element = container.querySelector('.rmp-play-pause');
+ playerButtons[2].element.setAttribute('data-button-id', '2');
+ playerButtons[3].element = container.querySelector('.rmp-i-quick-forward-tv');
+ playerButtons[3].element.setAttribute('data-button-id', '3');
+ playerButtons[4].element = container.querySelector('.rmp-fast-forward');
+ playerButtons[4].element.setAttribute('data-button-id', '4');
+ document.body.addEventListener('keydown', _onKeyDown);
+ _setActiveButton(2);
+ currentActiveButton = container.querySelector('.rmp-button-hover');
+});
/* needed to avoid double event firing on remote interaction */
-document.addEventListener('keypress', function (event) {
+/*document.addEventListener('keypress', function (event) {
event.stopPropagation();
event.preventDefault();
-});
+});*/
diff --git a/live-dash.html b/live-dash.html
index 3c45ce0..6d8ac7f 100644
--- a/live-dash.html
+++ b/live-dash.html
@@ -10,13 +10,13 @@
-
-
+
+
-
+