Customizing the Chromecast Receiver User Interface

Branding

You can customize the branding of the Chromecast receiver by modifying the HTML and/or JavaScript of the custom receiver application. Within the body of the HTML page you can modify various divs to make changes to the receiver UI. Please view the custom receiver code to see additional commented code explaining some of the different elements you can customize.

Splash Screen

 <div id="splash_screen">
    <img id="splash_image" class="absolute_center" src= "./images/ooyala-logo.png"/>
  </div> 

Loading Screen

 <div id="loading_screen">
    <div id="loading_container">
      <div id ="logo_wrap">
        <img id = "logo" src= "./images/ooyala-logo.png"></img>
      </div>
      <div id ="information_container">
        <div id ="promo_wrapper">
          <img id = "promo_image"></img>
        </div>
        <div class="divider"> </div>
        <div id = "information">
          <div style = "padding: 0px">
            <h1 id = "loading_title" class ="cast_text"></h1>
            <h3 id = "loading_description" class ="cast_text"></h3>
          </div>
        </div>
      </div>
    </div>    

Control Bar

  /*
    _Controls specifies how control Bar is going to appear on Receiver.
    You are welcome to modify, add and remove:
      - Logo: watermark image and TV rating
      - Video Metadata: promo image, Title
      - Play / Pause button
      - Scrubber bar
      - Time and Duration
      - Spinner icon
    */
     _Controls.prototype.init = function() {
      this.controls_wrap = document.createElement('div');
      this.controls_wrap.className = "oo_controls";
      this.rootElement.appendChild(this.controls_wrap);
      // Append the initial html to the control wrapper
      document.querySelector(".oo_controls").innerHTML +=
                               '<div id="pause_wrapper"  >\
                                  <img id="pause_icon" class="absolute_center" />\
                                  <div id="spinner_icon" class="absolute_center spinner"></div>\
                                </div>\
                                <div id="promo_title_container">\
                                  <img id ="promo_icon" />\
                                  <div id="title_wrapper">\
                                    <h1 id="title_header" class="cast_text"></h1>\
                                  </div>\
                                </div>\
                                <div id="watermark_wrapper">\
                                  <img id ="watermark_icon" />\
                                </div>\
                                <div id= "scrubber_wrapper">\
                                  <div id ="playhead_container">\
                                    <h5 id="playhead">00:00</h5>\
                                  </div>\
                                  <div id ="seek_bar">\
                                    <div id="progress"></div>\
                                    <div id="buffered_progress"></div>\
                                  </div>\
                                  <div id = "duration_wrapper">\
                                    <h5 id = "duration">00:00</h5>\
                                  </div>\
                                </div>';
    
      

Event Listening

You can customize the custom receiver UI to react to player events by listening to the events published by the V3 HTML5 Player or by modifying the CSS. This customization can occur in the onCreate function as a player parameter or after the V3 script has been loaded.

For example, you can display a splash screen when the content finishes. The User Interface that you customize in your customized receiver should abide by the design checklist that Google has in place. The following code is a code snippet of what’s in the actual code of the custom receiver.

        player.mb.subscribe("*", "chromecast", function(evt){
                    switch (evt) {
                      case OO.EVENTS.PLAYHEAD_TIME_CHANGED:
                        // Adjust playhead
                      case OO.EVENTS.PLAYED:
                        // Show the splash screen
                      case OO.EVENTS.SET_EMBED_CODE:
                        // Show the loading screen
                      case OO.EVENTS.STREAM_PLAYING:
                        // Show the playing screen
                      case OO.EVENTS.PAUSED:
                        // Show the paused controls
                      case OO.EVENTS.PLAYER_CREATED:
                        // Initialize everything
                      case OO.EVENTS.SEEKED:
                        // Show that the video has seeked
                      case OO.EVENTS.BUFFERING:
                        // Show that the video is buffering
                      case OO.EVENTS.BUFFERED:
                        // Show that the video has finished buffering
                      case OO.EVENTS.ERROR:
                        // Display the error screen with the proper errors
                    }
                });

Was this article helpful?