2.0.0

- Updates to Radiant Media Player 6.2.0 - Revamps demo structure - Adds low latency live HLS support and example - DRM support out of BETA
radiantmediaplayer · May 28, 2021 · 577f4f4 · 577f4f4
1 parent 8252cc2
commit 577f4f4
Show file tree

Hide file tree

Showing 18 changed files with 233 additions and 206 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+# Generated by package manager
+/node_modules/
+
diff --git a/README.md b/README.md
@@ -1,33 +1,43 @@
 # rmp-fire-tv
-Example for using [Radiant Media Player](https://www.radiantmediaplayer.com) in a web-based Fire TV app.
+Example for using [Radiant Media Player](https://www.radiantmediaplayer.com) in a Fire TV app.
 
 ## Usage
 You can use Radiant Media Player to build media-oriented web-based Fire TV applications. 
 The player is equipped with various optimisations, to work in the following environments:
-- [HTML5 web apps for Fire TV](https://developer.amazon.com/docs/fire-tv/getting-started-with-web-apps.html)
-- Fire OS 6+ (previous versions of Fire OS may work but they are untested)
+- [HTML5 Web Apps for Fire TV](https://developer.amazon.com/docs/fire-tv/getting-started-with-web-apps.html)
+- [HTML5 Hybrid Apps for Fire TV](https://developer.amazon.com/docs/fire-tv/hybrid-apps-overview.html) - this is required for DRM support
+
+We support Fire TV devices running on FireOS 5+.
 
 For a list of supported features [see our documentation](https://www.radiantmediaplayer.com/docs/latest/fire-tv-apps.html#features).
 
 ## Demo app structure
-The demo app is built with a landing page (index.html) that offers the possibility to start 5 different players showcasing various features available with Radiant Media Player for Fire TV app:
-- mp4.html (MP4 VOD)
-- hls.html (HLS VOD)
-- aes-hls.html (AES-128 HLS VOD)
-- live.html (Live HLS)
-- dash-drm.html (DASH DRM) **BETA**
-- dash-live.html (Live DASH)
-- dash-vp9.html (DASH VP9 VOD)
-- ads.html (HLS VOD with video ads)
-- ads-ima.html (HLS VOD with video ads (Google IMA))
-
-Players displayed use our dedicated TV player layout for a better fullscreen experience on large displays.
-
-This demo app has been tested on an Amazon Fire TV Stick 4K (FireOS 6+).
-
-## Example
+The demo app is built with a landing page (index.html) that offers the possibility to start different players showcasing various features available with Radiant Media Player for Fire TV app:
+
+### VOD
+- dash.html: DASH VOD AVC (H.264)
+- dash-vp9.html: DASH VOD VP9
+- dash-maudios-mcaptions.html: DASH VOD VP9/AVC with multiple audios and multiple captions 
+- hls.html: HLS-TS VOD AVC (H.264)
+- fmp4-hls.html: CMAF/fmp4 HLS VOD AVC (H.264)
+
+### Live
+- live-hls.html: Live HLS-TS AVC (H.264)
+- low-latency-live-hls.html: Low Latency Live CMAF/fmp4 HLS AVC (H.264)
+- live-dash.html: Live DASH AVC (H.264)
+
+### Video advertisement (VAST)
+- ads.html: Video ads with rmp-vast
+- ads-ima.html: Video ads with Google IMA
+
+Players displayed use our dedicated TV skin for a better fullscreen experience on large displays.
+
+### Example
 A live example of our demo app [can be viewed here](https://www.radiantmediaplayer.com/rmp-fire-tv/). This example 
-is made to be tested in web browsers or in Amazon Web App Tester. When testing your web app for Fire TV make sure to use your PLATFORM Edition license key. 
+is meant to be tested in [Amazon Web App Tester](https://developer.amazon.com/docs/fire-tv/webapp-app-tester.html) but can also be viewed in a web browser.
+
+## DRM
+We support Widevine DRM with DASH streaming on Fire TV. A basic Web Apps for Fire TV however does not allow for DRM support. We need to build a native Android app to display a WebView (a.k.a. hybrid app) - this is typically done by using a hybrid framework like Cordova or by creating a WebView project with Android Studio. This hybrid approach on Fire TV allows to provide capabilities that are not possible in a basic web app, due to the security boundary between the browser and the device APIs. This hybrid approach enables DRM support in Amazon WebView (AWV) and better performance for video playback. Please follow [our guide to building Android TV apps with Cordova](https://www.radiantmediaplayer.com/docs/latest/android-tv.html) for guidance.
 
 ## Issues
 Issues should be submitted in this GitHub page. We will do our best to review them.

diff --git a/ads-ima.html b/ads-ima.html
@@ -4,31 +4,31 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport"
-		content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no">
-	<title>Fire TV Demo App - HLS VOD with video ads (Google IMA)</title>
+		content="width=device-width,minimum-scale=1,initial-scale=1">
+	<title>Fire TV Demo App - Video ads with Google IMA</title>
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 	<meta name="robots" content="noindex">
 </head>
 
 <body>
-	<script src="https://cdn.radiantmediatechs.com/rmp/5.10.4/js/rmp.min.js"></script>
+	<script src="https://cdn.radiantmediatechs.com/rmp/6.2.0/js/rmp.min.js"></script>
 	<div id="rmpPlayer"></div>
 	<script>
-		var src = {
+		const src = {
 			hls: 'https://5b44cf20b0388.streamlock.net:8443/vod/smil:ed.smil/playlist.m3u8'
 		};
-		var settings = {
+		const settings = {
 			licenseKey: 'your-license-key',
 			src: src,
 			contentMetadata: {
-				title: 'Fire TV Demo App - HLS VOD with video ads (Google IMA)'
+				title: 'Fire TV Demo App - Video ads with Google IMA'
 			},
 			autoplay: true,
 			ads: true,
 			adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=' + Date.now(),
 			skin: 'tv'
 		};
-		var elementID = 'rmpPlayer';
+		const elementID = 'rmpPlayer';
 		window.rmp = new RadiantMP(elementID);
 		window.rmp.init(settings);
 	</script>

diff --git a/ads.html b/ads.html
@@ -4,32 +4,32 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport"
-		content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no">
-	<title>Fire TV Demo App - HLS VOD with video ads</title>
+		content="width=device-width,minimum-scale=1,initial-scale=1">
+	<title>Fire TV Demo App - Video ads with rmp-vast</title>
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 	<meta name="robots" content="noindex">
 </head>
 
 <body>
-	<script src="https://cdn.radiantmediatechs.com/rmp/5.10.4/js/rmp-vast.min.js"></script>
+	<script src="https://cdn.radiantmediatechs.com/rmp/6.2.0/js/rmp.min.js"></script>
 	<div id="rmpPlayer"></div>
 	<script>
-		var src = {
+		const src = {
 			hls: 'https://5b44cf20b0388.streamlock.net:8443/vod/smil:bbb.smil/playlist.m3u8'
 		};
-		var settings = {
+		const settings = {
 			licenseKey: 'your-license-key',
 			src: src,
 			contentMetadata: {
-				title: 'Fire TV Demo App - HLS VOD with video ads'
+				title: 'Fire TV Demo App - Video ads with rmp-vast'
 			},
 			autoplay: true,
 			ads: true,
 			adParser: 'rmp-vast',
 			adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/inline-linear-1.xml',
 			skin: 'tv'
 		};
-		var elementID = 'rmpPlayer';
+		const elementID = 'rmpPlayer';
 		window.rmp = new RadiantMP(elementID);
 		window.rmp.init(settings);
 	</script>

diff --git a/css/style.css b/css/style.css
@@ -1,12 +1,13 @@
 body {
-  font-family: 'PT Sans', sans-serif;
-}
-
-.rmp-tv-player .rmp-i-quick-forward-tv,
-.rmp-tv-player .rmp-i-quick-rewind-tv {
-  display: none !important;
+  font-family: Tahoma, Verdana, sans-serif;
 }
 
 pre {
   font-size: 12px;
-}
+}
+
+/* Hide default HTML5 video Google Cast Icon */
+/* The player does that job with JavaScript but it seems FireOS needs CSS as well to hide this icon */
+video::-webkit-media-controls-overlay-enclosure {
+  display: none !important;
+}
diff --git a/dash-drm.html b/dash-drm.html
diff --git a/dash-maudios-mcaptions.html b/dash-maudios-mcaptions.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport"
+		content="width=device-width,minimum-scale=1,initial-scale=1">
+	<title>Fire TV Demo App - DASH VOD VP9/AVC with multiple audios and multiple captions</title>
+	<link rel="stylesheet" type="text/css" href="css/style.css">
+	<meta name="robots" content="noindex">
+</head>
+
+<body>
+	<script src="https://cdn.radiantmediatechs.com/rmp/6.2.0/js/rmp.min.js"></script>
+	<div id="rmpPlayer"></div>
+	<script>
+		const src = {
+			dash: 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd'
+		};
+		const settings = {
+			licenseKey: 'your-license-key',
+			src: src,
+			contentMetadata: {
+				title: 'Fire TV Demo App - DASH VOD VP9/AVC with multiple audios and multiple captions'
+			},
+			autoplay: true,
+			skin: 'tv'
+		};
+		const elementID = 'rmpPlayer';
+		window.rmp = new RadiantMP(elementID);
+		window.rmp.init(settings);
+	</script>
+	<script src="js/player.js"></script>
+</body>
+
+</html>
diff --git a/dash-vp9.html b/dash-vp9.html
@@ -4,29 +4,29 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport"
-		content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no">
+		content="width=device-width,minimum-scale=1,initial-scale=1">
 	<title>Fire TV Demo App - DASH VP9 VOD</title>
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 	<meta name="robots" content="noindex">
 </head>
 
 <body>
-	<script src="https://cdn.radiantmediatechs.com/rmp/5.10.4/js/rmp.min.js"></script>
+	<script src="https://cdn.radiantmediatechs.com/rmp/6.2.0/js/rmp.min.js"></script>
 	<div id="rmpPlayer"></div>
 	<script>
-		var src = {
+		const src = {
 			dash: 'https://storage.googleapis.com/shaka-demo-assets/sintel-webm-only/dash.mpd'
 		};
-		var settings = {
+		const settings = {
 			licenseKey: 'your-license-key',
 			src: src,
 			contentMetadata: {
-				title: 'Fire TV Demo App - DASH VP9 VOD'
+				title: 'Fire TV Demo App - DASH VOD VP9'
 			},
 			autoplay: true,
 			skin: 'tv'
 		};
-		var elementID = 'rmpPlayer';
+		const elementID = 'rmpPlayer';
 		window.rmp = new RadiantMP(elementID);
 		window.rmp.init(settings);
 	</script>

diff --git a/mp4.html → dash.html b/mp4.html → dash.html
@@ -4,31 +4,29 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport"
-		content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no">
-	<title>Fire TV Demo App - MP4 VOD</title>
+		content="width=device-width,minimum-scale=1,initial-scale=1">
+	<title>Fire TV Demo App - DASH VOD AVC (H.264)</title>
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 	<meta name="robots" content="noindex">
 </head>
 
 <body>
-	<script src="https://cdn.radiantmediatechs.com/rmp/5.10.4/js/rmp.min.js"></script>
+	<script src="https://cdn.radiantmediatechs.com/rmp/6.2.0/js/rmp.min.js"></script>
 	<div id="rmpPlayer"></div>
 	<script>
-		var src = {
-			mp4: [
-				'https://www.rmp-streaming.com/media/tos-high.mp4'
-			]
+		const src = {
+			dash: 'https://storage.googleapis.com/shaka-demo-assets/sintel-mp4-only/dash.mpd'
 		};
-		var settings = {
+		const settings = {
 			licenseKey: 'your-license-key',
 			src: src,
-			autoplay: true,
 			contentMetadata: {
-				title: 'Fire TV Demo App - MP4 VOD'
+				title: 'Fire TV Demo App - DASH VOD AVC (H.264)'
 			},
+			autoplay: true,
 			skin: 'tv'
 		};
-		var elementID = 'rmpPlayer';
+		const elementID = 'rmpPlayer';
 		window.rmp = new RadiantMP(elementID);
 		window.rmp.init(settings);
 	</script>

diff --git a/aes-hls.html → fmp4-hls.html b/aes-hls.html → fmp4-hls.html
@@ -4,29 +4,29 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport"
-		content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no">
-	<title>Fire TV Demo App - AES-128 HLS VOD</title>
+		content="width=device-width,minimum-scale=1,initial-scale=1">
+	<title>Fire TV Demo App - CMAF/fmp4 HLS VOD AVC (H.264)</title>
 	<link rel="stylesheet" type="text/css" href="css/style.css">
 	<meta name="robots" content="noindex">
 </head>
 
 <body>
-	<script src="https://cdn.radiantmediatechs.com/rmp/5.10.4/js/rmp.min.js"></script>
+	<script src="https://cdn.radiantmediatechs.com/rmp/6.2.0/js/rmp.min.js"></script>
 	<div id="rmpPlayer"></div>
 	<script>
-		var src = {
-			hls: 'https://www.radiantmediaplayer.com/media/rmp-segment/bbb-abr-aes/playlist.m3u8'
+		const src = {
+			hls: 'https://storage.googleapis.com/shaka-demo-assets/apple-advanced-stream-fmp4/master.m3u8'
 		};
-		var settings = {
+		const settings = {
 			licenseKey: 'your-license-key',
 			src: src,
 			autoplay: true,
 			contentMetadata: {
-				title: 'Fire TV Demo App - AES-128 HLS VOD'
+				title: 'Fire TV Demo App - CMAF/fmp4 HLS VOD AVC (H.264)'
 			},
 			skin: 'tv'
 		};
-		var elementID = 'rmpPlayer';
+		const elementID = 'rmpPlayer';
 		window.rmp = new RadiantMP(elementID);
 		window.rmp.init(settings);
 	</script>