3.0.0

- updates for Radiant Media Player 8 - fixes remote navigation for latest FireOS updates - adds new example
radiantmediaplayer · Dec 22, 2022 · 05c2c25 · 05c2c25
1 parent 82ac34f
commit 05c2c25
Show file tree

Hide file tree

Showing 18 changed files with 453 additions and 176 deletions.
diff --git a/ads-dash.html b/ads-dash.html
@@ -0,0 +1,38 @@
+<!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 - Video ads with rmp-vast - DASH</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/8.4.0/js/rmp.min.js"></script>
+	<div id="rmp"></div>
+	<script>
+		var src = {
+			dash: 'https://www.radiantmediaplayer.com/media/v1/avc-mp4/dash/manifest.mpd'
+		};
+		var settings = {
+			licenseKey: 'your-license-key',
+			src: src,
+			contentMetadata: {
+				title: 'Fire TV Demo App - Video ads with rmp-vast - DASH'
+			},
+			autoplay: true,
+			ads: true,
+			adParser: 'rmp-vast',
+			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 = 'rmp';
+		window.rmp = new RadiantMP(elementID);
+		rmp.init(settings);
+	</script>
+	<script src="js/player.js"></script>
+</body>
+
+</html>
diff --git a/ads-ima-dash.html b/ads-ima-dash.html
@@ -0,0 +1,37 @@
+<!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 - Video ads with Google IMA - DASH</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/8.4.0/js/rmp.min.js"></script>
+	<div id="rmp"></div>
+	<script>
+		var src = {
+			dash: 'https://www.radiantmediaplayer.com/media/v1/avc-mp4/dash/manifest.mpd'
+		};
+		var settings = {
+			licenseKey: 'your-license-key',
+			src: src,
+			contentMetadata: {
+				title: 'Fire TV Demo App - Video ads with Google IMA - DASH'
+			},
+			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 = 'rmp';
+		window.rmp = new RadiantMP(elementID);
+		rmp.init(settings);
+	</script>
+	<script src="js/player.js"></script>
+</body>
+
+</html>
diff --git a/ads-ima.html b/ads-ima.html
@@ -3,34 +3,33 @@
 
 <head>
 	<meta charset="UTF-8">
-	<meta name="viewport"
-		content="width=device-width,minimum-scale=1,initial-scale=1">
-	<title>Fire TV Demo App - Video ads with Google IMA</title>
+	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+	<title>Fire TV Demo App - Video ads with Google IMA - CMAF HLS</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 src="https://cdn.radiantmediatechs.com/rmp/8.4.0/js/rmp.min.js"></script>
+	<div id="rmp"></div>
 	<script>
-		const src = {
-			hls: 'https://5b44cf20b0388.streamlock.net:8443/vod/smil:ed.smil/playlist.m3u8'
+		var src = {
+			hls: 'https://www.radiantmediaplayer.com/media/v1/avc-mp4/hls/playlist.m3u8'
 		};
-		const settings = {
+		var settings = {
 			licenseKey: 'your-license-key',
 			src: src,
 			contentMetadata: {
-				title: 'Fire TV Demo App - Video ads with Google IMA'
+				title: 'Fire TV Demo App - Video ads with Google IMA - CMAF HLS'
 			},
 			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'
 		};
-		const elementID = 'rmpPlayer';
+		var elementID = 'rmp';
 		window.rmp = new RadiantMP(elementID);
-		window.rmp.init(settings);
+		rmp.init(settings);
 	</script>
 	<script src="js/player.js"></script>
 </body>

diff --git a/ads.html b/ads.html
@@ -3,35 +3,34 @@
 
 <head>
 	<meta charset="UTF-8">
-	<meta name="viewport"
-		content="width=device-width,minimum-scale=1,initial-scale=1">
-	<title>Fire TV Demo App - Video ads with rmp-vast</title>
+	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+	<title>Fire TV Demo App - Video ads with rmp-vast - CMAF HLS</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 src="https://cdn.radiantmediatechs.com/rmp/8.4.0/js/rmp.min.js"></script>
+	<div id="rmp"></div>
 	<script>
-		const src = {
-			hls: 'https://5b44cf20b0388.streamlock.net:8443/vod/smil:bbb.smil/playlist.m3u8'
+		var src = {
+			hls: 'https://www.radiantmediaplayer.com/media/v1/avc-mp4/hls/playlist.m3u8'
 		};
-		const settings = {
+		var settings = {
 			licenseKey: 'your-license-key',
 			src: src,
 			contentMetadata: {
-				title: 'Fire TV Demo App - Video ads with rmp-vast'
+				title: 'Fire TV Demo App - Video ads with rmp-vast - CMAF HLS'
 			},
 			autoplay: true,
 			ads: true,
 			adParser: 'rmp-vast',
-			adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/inline-linear-1.xml',
+			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'
 		};
-		const elementID = 'rmpPlayer';
+		var elementID = 'rmp';
 		window.rmp = new RadiantMP(elementID);
-		window.rmp.init(settings);
+		rmp.init(settings);
 	</script>
 	<script src="js/player.js"></script>
 </body>

diff --git 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 → dash-av1.html b/low-latency-live-hls.html → dash-av1.html
@@ -4,30 +4,30 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-	<title>Fire TV Demo App - Low Latency Live CMAF/fmp4 HLS AVC (H.264)</title>
+	<title>Fire TV Demo App - DASH VOD AV1</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 src="https://cdn.radiantmediatechs.com/rmp/8.4.0/js/rmp.min.js"></script>
+	<div id="rmp"></div>
 	<script>
-		const src = {
-			hls: 'https://ll-hls-test.apple.com/cmaf/master.m3u8'
+		var src = {
+			dash: 'https://www.radiantmediaplayer.com/media/v1/av1-mp4/dash/manifest.mpd'
 		};
-		const settings = {
+		var settings = {
 			licenseKey: 'your-license-key',
 			src: src,
-			autoplay: true,
 			contentMetadata: {
-				title: 'Fire TV Demo App - Low Latency Live CMAF/fmp4 HLS AVC (H.264)'
+				title: 'Fire TV Demo App - DASH VOD AV1'
 			},
+			autoplay: true,
 			skin: 'tv'
 		};
-		const elementID = 'rmpPlayer';
+		var elementID = 'rmp';
 		window.rmp = new RadiantMP(elementID);
-		window.rmp.init(settings);
+		rmp.init(settings);
 	</script>
 	<script src="js/player.js"></script>
 </body>

diff --git a/dash-hevc.html b/dash-hevc.html
@@ -0,0 +1,35 @@
+<!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 HEVC</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/8.4.0/js/rmp.min.js"></script>
+	<div id="rmp"></div>
+	<script>
+		var src = {
+			dash: 'https://www.radiantmediaplayer.com/media/v1/hevc/dash/manifest.mpd'
+		};
+		var settings = {
+			licenseKey: 'your-license-key',
+			src: src,
+			contentMetadata: {
+				title: 'Fire TV Demo App - DASH VOD HEVC'
+			},
+			autoplay: true,
+			skin: 'tv'
+		};
+		var elementID = 'rmp';
+		window.rmp = new RadiantMP(elementID);
+		rmp.init(settings);
+	</script>
+	<script src="js/player.js"></script>
+</body>
+
+</html>
diff --git a/dash-maudios-mcaptions.html b/dash-maudios-mcaptions.html
diff --git a/dash-vp9.html b/dash-vp9.html
@@ -3,21 +3,20 @@
 
 <head>
 	<meta charset="UTF-8">
-	<meta name="viewport"
-		content="width=device-width,minimum-scale=1,initial-scale=1">
+	<meta name="viewport" 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/6.2.0/js/rmp.min.js"></script>
-	<div id="rmpPlayer"></div>
+	<script src="https://cdn.radiantmediatechs.com/rmp/8.4.0/js/rmp.min.js"></script>
+	<div id="rmp"></div>
 	<script>
-		const src = {
-			dash: 'https://storage.googleapis.com/shaka-demo-assets/sintel-webm-only/dash.mpd'
+		var src = {
+			dash: 'https://www.radiantmediaplayer.com/media/v1/vp9-webm/dash/manifest.mpd'
 		};
-		const settings = {
+		var settings = {
 			licenseKey: 'your-license-key',
 			src: src,
 			contentMetadata: {
@@ -26,9 +25,9 @@
 			autoplay: true,
 			skin: 'tv'
 		};
-		const elementID = 'rmpPlayer';
+		var elementID = 'rmp';
 		window.rmp = new RadiantMP(elementID);
-		window.rmp.init(settings);
+		rmp.init(settings);
 	</script>
 	<script src="js/player.js"></script>
 </body>

diff --git a/dash.html b/dash.html
@@ -3,21 +3,20 @@
 
 <head>
 	<meta charset="UTF-8">
-	<meta name="viewport"
-		content="width=device-width,minimum-scale=1,initial-scale=1">
+	<meta name="viewport" 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/6.2.0/js/rmp.min.js"></script>
-	<div id="rmpPlayer"></div>
+	<script src="https://cdn.radiantmediatechs.com/rmp/8.4.0/js/rmp.min.js"></script>
+	<div id="rmp"></div>
 	<script>
-		const src = {
-			dash: 'https://storage.googleapis.com/shaka-demo-assets/sintel-mp4-only/dash.mpd'
+		var src = {
+			dash: 'https://www.radiantmediaplayer.com/media/v1/avc-mp4/dash/manifest.mpd'
 		};
-		const settings = {
+		var settings = {
 			licenseKey: 'your-license-key',
 			src: src,
 			contentMetadata: {
@@ -26,9 +25,9 @@
 			autoplay: true,
 			skin: 'tv'
 		};
-		const elementID = 'rmpPlayer';
+		var elementID = 'rmp';
 		window.rmp = new RadiantMP(elementID);
-		window.rmp.init(settings);
+		rmp.init(settings);
 	</script>
 	<script src="js/player.js"></script>
 </body>