Fix poster visibility in fullscreen mode

This reverts part of a060bf2e, in which we stopped using the poster
attribute in favor of CSS background-image.  We are now using poster
again.  This fixes the visibility of the poster in fullscreen mode.

Closes #778
Fixes: 38004161

Change-Id: I4b8cbb771cd435a04dda5b298cf4daea0ed6f516

demo/asset_section.js

@@ -191,8 +191,8 @@ shakaDemo.load = function() {
 
   var asset = shakaDemo.preparePlayer_(option.asset);
 
-  // Revert to default styles while we load.
-  shakaDemo.localVideo_.classList.remove('audioOnly');
+  // Revert to default poster while we load.
+  shakaDemo.localVideo_.poster = shakaDemo.mainPoster_;
 
   // Load the manifest.
   player.load(asset.manifestUri).then(function() {
@@ -205,9 +205,9 @@ shakaDemo.load = function() {
     var videoTracks =
         player.getVariantTracks().filter(function(t) { return t.width; });
 
-    // Style the video element differently for audio-only assets.
+    // Set a different poster for audio-only assets.
     if (videoTracks.length == 0) {
-      shakaDemo.localVideo_.classList.add('audioOnly');
+      shakaDemo.localVideo_.poster = shakaDemo.audioOnlyPoster_;
     }
 
     // Disallow casting of offline content.

demo/demo.css

@@ -270,16 +270,6 @@ summary {
   width: 100%;
   height: 100%;
   margin: auto;
-
-  background-color: transparent;
-  background-position: 50% 50%;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-image: url('//shaka-player-demo.appspot.com/assets/poster.jpg');
-}
-
-#video.audioOnly {
-  background-image: url('//shaka-player-demo.appspot.com/assets/audioOnly.gif');
 }
 
 .errorLog {

demo/main.js

@@ -63,6 +63,21 @@ shakaDemo.hashCanChange_ = false;
 shakaDemo.suppressHashChangeEvent_ = false;
 
 
+/**
+ * @private
+ * @const {string}
+ */
+shakaDemo.mainPoster_ = '//shaka-player-demo.appspot.com/assets/poster.jpg';
+
+
+/**
+ * @private
+ * @const {string}
+ */
+shakaDemo.audioOnlyPoster_ =
+    '//shaka-player-demo.appspot.com/assets/audioOnly.gif';
+
+
 /**
  * The registered ID of the v2.1 Chromecast receiver demo.
  * @const {string}
@@ -144,6 +159,9 @@ shakaDemo.init = function() {
       shakaDemo.localVideo_ = localVideo;
       shakaDemo.localPlayer_ = localPlayer;
 
+      // Set the default poster.
+      shakaDemo.localVideo_.poster = shakaDemo.mainPoster_;
+
       var asyncSetup = shakaDemo.setupAssets_();
       shakaDemo.setupOffline_();
       shakaDemo.setupConfiguration_();

demo/receiver_app.css

@@ -46,14 +46,6 @@ body {
   margin: auto;
 }
 
-#video.audioOnly {
-  background-color: transparent;
-  background-position: 50% 50%;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-image: url('//shaka-player-demo.appspot.com/assets/audioOnly.gif');
-}
-
 #controlsContainer {
   padding: 0 3%;
   height: auto;

demo/receiver_app.js

@@ -131,11 +131,13 @@ ShakaReceiver.prototype.checkIdle_ = function() {
     var videoTracks =
         this.player_.getVariantTracks().filter(function(t) { return t.width; });
 
-    // Style the video element differently for audio-only assets.
+    // Set a special poster for audio-only assets.
     if (videoTracks.length == 0) {
-      this.video_.classList.add('audioOnly');
+      this.video_.poster =
+          '//shaka-player-demo.appspot.com/assets/audioOnly.gif';
     } else {
-      this.video_.classList.remove('audioOnly');
+      // The cast receiver never shows the poster for assets with video streams.
+      this.video_.removeAttribute('poster');
     }
   }
 };