No public description

PiperOrigin-RevId: 686109321

hbbtv/ads_manager.js

@@ -16,6 +16,7 @@
 
 var POD_DURATION = 90000; // Ad pod duration in millisecond.
 
+// [START create_ad_manager]
 /**
  * Wraps IMA SDK ad stream manager.
  * @param {!VideoPlayer} videoPlayer Reference an instance of the wrapper from
@@ -49,7 +50,9 @@ var AdManager = function(videoPlayer) {
 
   this.videoPlayer.setEmsgEventHandler(this.onEmsgEvent, this);
 };
+// [END create_ad_manager]
 
+// [START ads_manager_request_stream]
 /**
  * Makes a pod stream request.
  * @param {string} networkCode The network code.
@@ -62,7 +65,9 @@ AdManager.prototype.requestStream = function(networkCode, customAssetKey) {
   debugView.log('AdsManager: make PodStreamRequest');
   this.streamManager.requestStream(streamRequest);
 };
+// [END ads_manager_request_stream]
 
+// [START ads_manager_stream_event]
 /**
  * Handles IMA playback events.
  * @param {!Event} event The event object.
@@ -97,7 +102,9 @@ AdManager.prototype.onStreamEvent = function(event) {
       break;
   }
 };
+// [END ads_manager_stream_event]
 
+// [START ads_manager_emsg_event]
 /**
  * Callback on Emsg event.
  * Instructs IMA SDK to fire back VAST events accordingly.
@@ -110,7 +117,9 @@ AdManager.prototype.onEmsgEvent = function(event) {
     this.streamManager.processMetadata('ID3', data, pts);
   }
 };
+// [END ads_manager_emsg_event]
 
+// [START ads_manager_load_manifest]
 /**
  * Creates DAI pod url and instructs video player to load manifest.
  */
@@ -124,6 +133,7 @@ AdManager.prototype.loadAdPodManifest = function() {
       this.getPodId(), POD_DURATION);
   this.videoPlayer.preload(manifestUrl);
 };
+// [END ads_manager_load_manifest]
 
 /**
  * Helper Function to get an unused pod ID.

hbbtv/application.js

@@ -35,6 +35,7 @@ var CUSTOM_ASSET_KEY = '';
 var app;
 var debugView;
 
+// [START create_app]
 /** Main HbbTV Application. */
 var HbbTVApp = function() {
   this.broadcastAppManager = document.getElementById('broadcast-app-manager');
@@ -61,6 +62,7 @@ var HbbTVApp = function() {
 
   this.adManager = new AdManager(this.videoPlayer);
 };
+// [END create_app]
 
 /**
  * Listen to play state change events
@@ -69,6 +71,7 @@ HbbTVApp.prototype.onPlayStateChangeEvent = function() {
   var playStateString =
       this.getBroadcastState(this.broadcastContainer.playState);
   debugView.log('onPlayStateChangeEvent event: ' + playStateString);
+  // [START app_presenting_playstate_change]
   if (!this.subscribedToStreamEvents &&
       this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
     this.subscribedToStreamEvents = true;
@@ -79,13 +82,15 @@ HbbTVApp.prototype.onPlayStateChangeEvent = function() {
     debugView.log('HbbTVApp: Subscribing to stream events.');
     this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
   }
+  // [END app_presenting_playstate_change]
 
   if (this.playState != this.broadcastContainer.playState) {
     debugView.log('onPlayStateChange event: ' + playStateString);
     this.playState = this.broadcastContainer.playState;
   }
 };
 
+// [START app_stream_event]
 /**
  * Callback for HbbTV stream event.
  * @param {!Event} event Stream event payload.
@@ -101,6 +106,7 @@ HbbTVApp.prototype.onStreamEvent = function(event) {
     this.onAdBreakEnd(eventData);
   }
 };
+// [END app_stream_event]
 
 /**
  * Returns current broadcast state.
@@ -128,7 +134,7 @@ HbbTVApp.prototype.getBroadcastState = function() {
   return currentState;
 };
 
-
+// [START app_ad_break_announce]
 /**
  * Callback function on ad break announce stream event.
  * @param {!Event} event HbbTV stream event payload.
@@ -142,7 +148,9 @@ HbbTVApp.prototype.onAdBreakAnnounce = function(event) {
       's offset: ' + eventOffset + 's');
   this.adManager.loadAdPodManifest();
 };
+// [END app_ad_break_announce]
 
+// [START app_ad_break_start]
 /**
  * Callback function on ad break start stream event.
  * @param {!Event} event HbbTV stream event payload.
@@ -157,7 +165,9 @@ HbbTVApp.prototype.onAdBreakStart = function(event) {
   this.stopBroadcast();
   this.videoPlayer.play();
 };
+// [END app_ad_break_start]
 
+// [START app_ad_break_end]
 /**
  * Callback function on ad break end stream event.
  * @param {!Event} event HbbTV stream event payload.
@@ -167,6 +177,7 @@ HbbTVApp.prototype.onAdBreakEnd = function(event) {
   this.videoPlayer.stop();
   this.resumeBroadcast();
 };
+// [END app_ad_break_end]
 
 /** Starts broadcast stream. */
 HbbTVApp.prototype.resumeBroadcast = function() {

hbbtv/index.html

@@ -19,8 +19,10 @@
   <head>
     <title>HbbTV Linear Sample App</title>
     <meta http-equiv="Content-Type" content="application/vnd.hbbtv.xml+xhtml; utf-8" />
+    <!-- [START load_dependencies] -->
     <script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script>
     <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
+    <!-- [END load_dependencies] -->
     <script src="application.js"></script>
     <script src="video_player.js"></script>
     <script src="ads_manager.js"></script>
@@ -30,9 +32,11 @@
     <object id="broadcast-app-manager" type="application/oipfApplicationManager"></object>
     <div id="content-wrapper">
         <div id="console"></div>
+        <!-- [START broadband_player] -->
         <div id="broadband-wrapper">
             <video id="broadband-video"></video>
         </div>
+        <!-- [END broadband_player] -->
         <div id="broadcast-wrapper">
             <object id="broadcast-video" type="video/broadcast"></object>
         </div>

hbbtv/video_player.js

@@ -14,11 +14,16 @@
  limitations under the License.
  */
 
+// [START video_player_scheme_uri]
 var SCHEME_ID_URI = 'https://developer.apple.com/streaming/emsg-id3';
+// [END video_player_scheme_uri]
 
+// [START video_player_ad_buffer]
 // Ads will only play with 10 or more seconds of ad loaded.
 var MIN_BUFFER_THRESHOLD = 10;
+// [END video_player_ad_buffer]
 
+// [START create_video_player]
 /**
  * Video player wrapper class to control ad creative playback with dashjs in
  * broadband.
@@ -38,7 +43,9 @@ var VideoPlayer = function() {
   this.playerListenerCleanup;
   debugView.log('Player: Initializing dashjs');
 };
+// [END create_video_player]
 
+// [START video_player_controls]
 /** Starts playback of ad stream. */
 VideoPlayer.prototype.play = function() {
   debugView.log('Player: Start playback');
@@ -58,15 +65,19 @@ VideoPlayer.prototype.stop = function() {
   this.player = null;
   this.hide();
 };
+// [END video_player_controls]
 
+// [START video_player_set_ad_pod_ended]
 /**
  * Sets a callback function for when an ad pod has ended.
  * @param {!Function} callback Callback function.
  */
 VideoPlayer.prototype.setOnAdPodEnded = function(callback) {
   this.onAdPodEndedCallback = callback;
 };
+// [END video_player_set_ad_pod_ended]
 
+// [START video_player_preload]
 /**
  * Starts ad stream prefetching into Media Source Extensions (MSE) buffer.
  * @param {string} url manifest url for ad stream playback.
@@ -91,6 +102,7 @@ VideoPlayer.prototype.preload = function(url) {
   this.attachPlayerListener();
   debugView.log('Player: Pre-loading into MSE buffer');
 };
+// [END video_player_preload]
 
 /**
  * Controls the dashjs player's own logging in the debugging console.
@@ -102,6 +114,7 @@ VideoPlayer.prototype.onLog = function(event) {
   }
 };
 
+// [START video_player_attach_listeners]
 /** Attaches event listener for various dashjs events.*/
 VideoPlayer.prototype.attachPlayerListener = function() {
   var playingHandler = function() {
@@ -139,7 +152,9 @@ VideoPlayer.prototype.attachPlayerListener = function() {
     }
   };
 };
+// [END video_player_attach_listeners]
 
+// [START video_player_emsg_handler]
 /**
  * Sets emsg event handler.
  * @param {!Function} customEventHandler Event handler.
@@ -150,7 +165,9 @@ VideoPlayer.prototype.setEmsgEventHandler = function(
   this.onCustomEventHandler = customEventHandler;
   this.customEventHandlerScope = scope;
 };
+// [END video_player_emsg_handler]
 
+// [START video_player_event_callbacks]
 /**
  * Called when ad stream playback buffered and is playing.
  */
@@ -180,7 +197,9 @@ VideoPlayer.prototype.onAdPodError = function(event) {
     this.onAdPodEndedCallback();
   }
 };
+// [END video_player_event_callbacks]
 
+// [START video_player_show_hide]
 /** Shows the video player. */
 VideoPlayer.prototype.show = function() {
   debugView.log('Player: show');
@@ -192,7 +211,9 @@ VideoPlayer.prototype.hide = function() {
   debugView.log('Player: hide');
   this.broadbandWrapper.style.display = 'none';
 };
+// [END video_player_show_hide]
 
+// [START video_player_is_preloaded]
 /**
  * Checks if the ad is preloaded and ready to play.
  * @return {boolean} whether the ad buffer level is sufficient.
@@ -201,4 +222,5 @@ VideoPlayer.prototype.isPreloaded = function() {
   var currentBufferLevel = this.player.getDashMetrics()
       .getCurrentBufferLevel('video', true);
   return currentBufferLevel >= MIN_BUFFER_THRESHOLD;
-};
+};
+// [END video_player_is_preloaded]