[#862811] Delay loading of popcorn video and track event data until user clicks on embed.

public/css/controls.css

@@ -30,7 +30,6 @@
 /* Big Button */
 
 #controls-big-play-button {
-  display: none;
   width: 57px;
   height: 66px;
   background: url( "../resources/controls/icon_play.png" ) no-repeat;

public/src/embed.js

@@ -266,8 +266,6 @@ function init() {
       "popcorn"
     ],
     function( URI, Controls, TextboxWrapper ) {
-      // cornfield writes out the Popcorn initialization code as popcornDataFn()
-      window.popcornDataFn();
       /**
        * Expose Butter so we can get version info out of the iframe doc's embed.
        * This "butter" is never meant to live in a page with the full "butter".
@@ -276,7 +274,7 @@ function init() {
       var Butter = {
             version: "Butter-Embed-@VERSION@"
           },
-          popcorn = Popcorn.byId( "Butter-Generated" ),
+          popcorn,
           config,
           qs = URI.parse( window.location.href ).queryKey,
           container = document.querySelectorAll( ".container" )[ 0 ];
@@ -321,10 +319,7 @@ function init() {
         showinfo: qs.showinfo === "0" ? false : true
       };
 
-      // Always show controls.  See #2284 and #2298 on supporting
-      // options.controls, options.autohide.
-      popcorn.controls( true );
-      Controls.create( "controls", popcorn, {
+      Controls.create( "controls", {
         onShareClick: function() {
           shareClick( popcorn );
         },
@@ -333,6 +328,43 @@ function init() {
         },
         onFullscreenClick: function() {
           fullscreenClick();
+        },
+        init: function( setPopcorn ) {
+          // cornfield writes out the Popcorn initialization code as popcornDataFn()
+          window.popcornDataFn();
+          popcorn = Popcorn.byId( "Butter-Generated" );
+          setPopcorn( popcorn );
+          // Always show controls.  See #2284 and #2298 on supporting
+          // options.controls, options.autohide.
+          popcorn.controls( true );
+
+          if ( config.loop ) {
+            popcorn.loop( true );
+          }
+
+          // Either the video is ready, or we need to wait.
+          if ( popcorn.readyState() >= 1 ) {
+            onLoad();
+          } else {
+            popcorn.media.addEventListener( "canplay", onLoad );
+          }
+
+          if ( config.branding ) {
+            setupClickHandlers( popcorn, config );
+            setupEventHandlers( popcorn, config );
+
+            // Wrap textboxes so they click-to-highlight and are readonly
+            TextboxWrapper.applyTo( $( "#share-url" ), { readOnly: true } );
+            TextboxWrapper.applyTo( $( "#share-iframe" ), { readOnly: true } );
+
+            // Write out the iframe HTML necessary to embed this
+            $( "#share-iframe" ).value = buildIFrameHTML();
+
+            // Get the page's canonical URL and put in share URL
+            $( "#share-url" ).value = getCanonicalURL();
+          }
+
+          setupAttribution( popcorn );
         }
       });
 
@@ -341,9 +373,6 @@ function init() {
         var embedInfo = document.getElementById( "embed-info" );
         embedInfo.parentNode.removeChild( embedInfo );
       }
-      if ( config.loop ) {
-        popcorn.loop( true );
-      }
 
       // Some config options want the video to be ready before we do anything.
       function onLoad() {
@@ -388,30 +417,6 @@ function init() {
         }
       }
 
-      // Either the video is ready, or we need to wait.
-      if ( popcorn.readyState() >= 1 ) {
-        onLoad();
-      } else {
-        popcorn.media.addEventListener( "canplay", onLoad );
-      }
-
-      if ( config.branding ) {
-        setupClickHandlers( popcorn, config );
-        setupEventHandlers( popcorn, config );
-
-        // Wrap textboxes so they click-to-highlight and are readonly
-        TextboxWrapper.applyTo( $( "#share-url" ), { readOnly: true } );
-        TextboxWrapper.applyTo( $( "#share-iframe" ), { readOnly: true } );
-
-        // Write out the iframe HTML necessary to embed this
-        $( "#share-iframe" ).value = buildIFrameHTML();
-
-        // Get the page's canonical URL and put in share URL
-        $( "#share-url" ).value = getCanonicalURL();
-      }
-
-      setupAttribution( popcorn );
-
       if ( window.Butter && console && console.warn ) {
         console.warn( "Butter Warning: page already contains Butter, removing." );
         delete window.Butter;

public/src/ui/widget/controls.js

@@ -2,16 +2,16 @@
  * If a copy of the MIT license was not distributed with this file, you can
  * obtain one at https://raw.github.com/mozilla/butter/master/LICENSE */
 
-define( [ "util/lang", "util/time", "text!layouts/controls.html" ],
-  function( LangUtils, Time, CONTROLS_LAYOUT ) {
+define( [ "util/lang", "util/time", "util/uri", "text!layouts/controls.html" ],
+  function( LangUtils, Time, URI, CONTROLS_LAYOUT ) {
 
-  function Controls( container, p, options ) {
+  function Controls( container, options ) {
 
     var LEFT_MOUSE_BUTTON = 0,
         SPACE_BAR = 32;
 
     var _controls = LangUtils.domFragment( CONTROLS_LAYOUT ).querySelector( "#butter-controls" ),
-        _container = typeof container === "string" ? document.getElementById( container ) : container,
+        _container = typeof container === "string" ? document.getElementById( container ) : container, p,
         // variables
         muteButton, playButton, currentTimeDialog, fullscreenButton,
         durationDialog, timebar, progressBar, bigPlayButton,
@@ -30,10 +30,26 @@ define( [ "util/lang", "util/time", "text!layouts/controls.html" ],
         onShareClick = options.onShareClick || nop,
         onRemixClick = options.onRemixClick || nop,
         onFullscreenClick = options.onFullscreenClick || nop,
-        onLogoClick = options.onLogoClick || nop;
+        onLogoClick = options.onLogoClick || nop,
+        init = options.init || nop;
 
-    p.controls( false );
-    _container.appendChild( _controls );
+    function onInit() {
+
+      document.removeEventListener( "click", onInit, false );
+      function setPopcorn( popcorn ) {
+        p = popcorn;
+      }
+      init( setPopcorn );
+
+      p.controls( false );
+      if ( p.readyState() >= 1 ) {
+
+        ready();
+      } else {
+
+        p.media.addEventListener( "loadedmetadata", ready, false );
+      }
+    }
 
     var ready = function() {
       p.media.removeEventListener( "loadedmetadata", ready, false );
@@ -73,6 +89,7 @@ define( [ "util/lang", "util/time", "text!layouts/controls.html" ],
           p.media.removeEventListener( "play", bigPlayClicked, false );
           bigPlayButton.removeEventListener( "click", bigPlayClicked, false );
           bigPlayButton.classList.remove( "controls-ready" );
+          bigPlayButton.classList.add( "hide-button" );
           p.media.addEventListener( "mouseover", activate, false );
           if ( p.paused() ) {
             p.play();
@@ -407,19 +424,20 @@ define( [ "util/lang", "util/time", "text!layouts/controls.html" ],
       }
     };
 
+    _container.appendChild( _controls );
+
+    // If we're not autoPlay, wait for user interaction before we're ready.
+    if ( URI.parse( window.location ).queryKey[ "preload" ] === "none" ) {
+      document.addEventListener( "click", onInit, false );
+    } else {
+      onInit();
+    }
+
     if ( !_container ) {
 
       return;
     }
 
-    if ( p.readyState() >= 1 ) {
-
-      ready();
-    } else {
-
-      p.media.addEventListener( "loadedmetadata", ready, false );
-    }
-
     return _container;
   }