3.0.0

- Updates to Radiant Media Player 9 - Updates demo - Updates docs for video advertisement support
radiantmediaplayer · May 8, 2023 · c25ebbb · c25ebbb
1 parent cc97d24
commit c25ebbb
Show file tree

Hide file tree

Showing 29 changed files with 439 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -25,9 +25,14 @@ Our demo holds a basic appinfo.json file that is typical of LG TV app. This demo
 
 ## Support notes
 
-- We support streaming to LG TVs in MPEG-DASH or CMAF HLS (HLS in MPEG-TS format is not supported).
+- We support streaming to LG TVs in MPEG-DASH or HLS (CMAF or MPEG-TS)
+- We support video advertisement with the following configuration 
+  - Video ads with rmp-vast and HLS (`hlsEngine: 'hlsjs'` setting)
+  - Video ads with Google IMA and HLS with `forceNativeHlsOverHlsJS: true` setting
+  - Video ads with rmp-vast and MPEG-DASH are only supported on latest version of webOS (webOS TV 22+)
+  - Video ads with Google IMA and MPEG-DASH are NOT supported
 - According to our tetsing, AV1 support can be clunky on older webOS versions (even if they advertise support for it). AVC, VP9 or HEVC should be preferred if you wish to support older versions of webOS.
-- Google IMA (video ads) is not currently supported, please use our rmp-vast parser to display video ads on LG Smart TV.
+
 
 ## Issues
 

diff --git a/webapp/css/player.css b/webapp/css/player.css
@@ -11,11 +11,12 @@
 }
 
 /* 
- * When a module is open: keep the control bar visible to 
+ * When a module is open or an ad is displayed: 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 {
+.rmp-tv.rmp-module-open-ui .rmp-control-bar,
+.rmp-tv.rmp-linear-ad-ui .rmp-control-bar {
   display: block !important;
   opacity: 1 !important;
   visibility: visible !important;

diff --git a/webapp/index.html b/webapp/index.html
@@ -24,34 +24,40 @@ <h2>LG TV Demo App</h2>
       </div>
     </div>
     <div class="row">
-      <div class="col">
-        <h3>MPEG-DASH</h3>
+      <div class="col-6">
+        <h3>Codecs</h3>
         <ul class="demo-list">
-          <li><a href="dash-vod-avc.html">DASH VOD AVC</a></li>
-          <li><a href="dash-vod-hevc.html">DASH VOD HEVC</a></li>
-          <li><a href="dash-vod-vp9.html">DASH VOD VP9</a></li>
-          <li><a href="dash-vod-av1.html">DASH VOD AV1 (MP4 container)</a></li>
-          <li><a href="dash-vod-av1-webm.html">DASH VOD AV1 (WebM container)</a></li>
-          <li><a href="dash-live.html">DASH LIVE AVC</a></li>
-          <li><a href="dash-drm-3.html">DASH DRM Angel One no_auth (Google - Widevine)</a></li>
-          <li><a href="dash-drm-4.html">DASH DRM - 8 Byte IV (Verizon - Widevine)</a></li>
-          <li><a href="dash-drm-6.html">DASH DRM Big Buck Bunny (Azure - Widevine)</a></li>
-          <li><a href="dash-dvr.html">DASH DVR AVC</a> - NOT SUPPORTED YET - FOR TESTING ONLY</li>
+          <li><a href="sample/codecs/dash-vod-avc.html">DASH VOD AVC</a></li>
+          <li><a href="sample/codecs/dash-vod-hevc.html">DASH VOD HEVC</a></li>
+          <li><a href="sample/codecs/dash-vod-vp9.html">DASH VOD VP9</a></li>
+          <li><a href="sample/codecs/dash-vod-av1.html">DASH VOD AV1 (MP4 container)</a></li>
+          <li><a href="sample/codecs/dash-vod-av1-webm.html">DASH VOD AV1 (WebM container)</a></li>
+          <li><a href="sample/codecs/hls-vod-avc.html">HLS VOD AVC</a></li>
         </ul>
         <h3>Video advertisement</h3>
         <ul class="demo-list">
-          <li><a href="dash-rmp-vast-ads.html">DASH with video ads (rmp-vast)</a></li>
-          <li><a href="hls-vod-avc-rmp-vast-ads.html">CMAF HLS with video ads (rmp-vast)</a></li>
-          <li><a href="dash-rmp-vast-skippable-ads.html">DASH with skippable video ads (rmp-vast)</a></li>
-          <li><a href="dash-ima-ads.html">DASH with video ads (Google IMA)</a> - NOT SUPPORTED YET - FOR TESTING ONLY
+          <li><a href="sample/advertisement/dash-rmp-vast-ads.html">DASH with video ads (rmp-vast)</a></li>
+          <li><a href="sample/advertisement/dash-rmp-vast-skippable-ads.html">DASH with skippable video ads
+              (rmp-vast)</a></li>
+          <!--<li><a href="sample/advertisement/dash-ima-ads.html">DASH with video ads (Google IMA)</a> - NOT SUPPORTED YET
+            - FOR TESTING ONLY-->
           </li>
-          <li><a href="hls-vod-avc-ima-ads.html">CMAF HLS with video ads (Google IMA)</a> - NOT SUPPORTED YET - FOR
-            TESTING ONLY</li>
+          <li><a href="sample/advertisement/hls-rmp-vast-ads.html">CMAF HLS with video ads (rmp-vast)</a></li>
+          <li><a href="sample/advertisement/hls-ima-ads.html">CMAF HLS with video ads (Google IMA)</a></li>
+          <li><a href="sample/advertisement/hls-rmp-vast-ts.html">HLS-TS with video ads (rmp-vast)</a></li>
+          <li><a href="sample/advertisement/hls-ima-ts.html">HLS-TS with video ads (Google IMA)</a></li>
+        </ul>
+        <h3>Live</h3>
+        <ul class="demo-list">
+          <li><a href="sample/live/dash-live.html">DASH Live</a></li>
+          <li><a href="sample/live/dash-dvr.html">DASH DVR</a></li>
+          <li><a href="sample/live/hls-live.html">HLS Live</a></li>
         </ul>
-        <h3>HLS</h3>
+        <h3>DRM</h3>
         <ul class="demo-list">
-          <li><a href="hls-vod-avc.html">CMAF HLS VOD AVC</a></li>
-          <li><a href="hls-live-avc.html">CMAF HLS Live AVC</a></li>
+          <li><a href="sample/drm/dash-drm-3.html">DASH DRM Angel One no_auth (Google - Widevine)</a></li>
+          <li><a href="sample/drm/dash-drm-4.html">DASH DRM - 8 Byte IV (Verizon - Widevine)</a></li>
+          <li><a href="sample/drm/dash-drm-6.html">DASH DRM Big Buck Bunny (Azure - Widevine)</a></li>
         </ul>
         <h3>Helpers</h3>
         <ul class="demo-list">
@@ -62,8 +68,13 @@ <h3>Helpers</h3>
           <li><a href="https://shaka-player-demo.appspot.com/support.html">Environment API (Shaka player)</a></li>
         </ul>
       </div>
+      <div class="col-6">
+        <h3>Device Info (webOSTV.js)</h3>
+        <div id="device-info"></div>
+      </div>
     </div>
   </div>
+  <script src="js/webOSTVjs-1.2.7/webOSTV.js"></script>
   <script src="js/main.js"></script>
 </body>
 

diff --git a/webapp/js/main.js b/webapp/js/main.js
@@ -48,6 +48,49 @@ var _onKeyDown = function (e) {
       break;
   }
 };
+var deviceInfo = document.getElementById('device-info');
+function getDeviceInfo(device) {
+  var info =
+    '<table>' +
+    '<tr>' +
+    '<th>modelName</th>' +
+    '<td>' + device.modelName + '</td>' +
+    '<th>version</th>' +
+    '<td>' + device.version + '</td>' +
+    '<th>sdkVersion</th>' +
+    '<td>' + device.sdkVersion + '</td>' +
+    '</tr>' +
+    '<tr>' +
+    '<th>screenWidth</th>' +
+    '<td>' + device.screenWidth + '</td>' +
+    '<th>screenHeight</th>' +
+    '<td>' + device.screenHeight + '</td>' +
+    '<th>ddrSize</th>' +
+    '<td>' + device.ddrSize + '</td>' +
+    '</tr>' +
+    '<tr>' +
+    '<th>uhd</th>' +
+    '<td>' + device.uhd + '</td>' +
+    '<th>uhd8K</th>' +
+    '<td>' + device.uhd8K + '</td>' +
+    '<th>oled</th>' +
+    '<td>' + device.oled + '</td>' +
+    '</tr>' +
+    '<tr>' +
+    '<th>hdr10</th>' +
+    '<td>' + device.hdr10 + '</td>' +
+    '<th>dolbyVision</th>' +
+    '<td>' + device.dolbyVision + '</td>' +
+    '<th>dolbyAtmos</th>' +
+    '<td>' + device.dolbyAtmos + '</td>' +
+    '</tr>' +
+    '</table>';
+  deviceInfo.innerHTML = info;
+}
+
+webOS.deviceInfo(function (device) {
+  getDeviceInfo(device);
+});
 
 // when player is ready we wire the UI
 document.addEventListener('keydown', _onKeyDown);
diff --git a/webapp/js/player-ads.js b/webapp/js/player-ads.js
@@ -113,7 +113,7 @@ var _onKeyDown = function (e) {
 };
 
 // when player reaches loadeddata we wire the UI
-container.addEventListener('loadeddata', function () {
+window.rmp.one('loadeddata', function () {
   document.body.addEventListener('keydown', _onKeyDown);
   var isAdOnStage = window.rmp.getAdOnStage();
   if (isAdOnStage) {
@@ -132,7 +132,7 @@ container.addEventListener('loadeddata', function () {
   _setActiveButton(2);
 });
 
-container.addEventListener('adstarted', function () {
+window.rmp.on('adstarted', function () {
   playerButtons = playerButtonsForAds;
   playerButtons[0].element = container.querySelector('.rmp-play-pause');
   playerButtons[0].element.setAttribute('data-button-id', '0');
@@ -145,7 +145,7 @@ container.addEventListener('adstarted', function () {
   _setActiveButton(0);
 });
 
-container.addEventListener('addestroyed', function () {
+window.rmp.on('addestroyed', function () {
   playerButtons = playerButtonsForContent;
   playerButtons[0].element = container.querySelector('.rmp-fast-rewind');
   playerButtons[0].element.setAttribute('data-button-id', '0');
@@ -158,4 +158,4 @@ container.addEventListener('addestroyed', function () {
   playerButtons[4].element = container.querySelector('.rmp-fast-forward');
   playerButtons[4].element.setAttribute('data-button-id', '4');
   _setActiveButton(2);
-});
+});
diff --git a/webapp/js/player-live.js b/webapp/js/player-live.js
@@ -98,7 +98,7 @@ var _onKeyDown = function (e) {
 };
 
 // when player is ready we wire the UI
-container.addEventListener('loadeddata', function () {
+window.rmp.one('loadeddata', function () {
   playerButtons[0].element = container.querySelector('.rmp-play-pause');
   playerButtons[0].element.setAttribute('data-button-id', '0');
   document.body.addEventListener('keydown', _onKeyDown);

diff --git a/webapp/js/player.js b/webapp/js/player.js
@@ -100,7 +100,7 @@ var _onKeyDown = function (e) {
 };
 
 // when player reaches loadeddata we wire the UI
-container.addEventListener('loadeddata', function () {
+window.rmp.one('loadeddata', function () {
   document.body.addEventListener('keydown', _onKeyDown);
   playerButtons[0].element = container.querySelector('.rmp-fast-rewind');
   playerButtons[0].element.setAttribute('data-button-id', '0');