From 0e24ff14f381522ae52eb57d49694e028f538ac1 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Mon, 1 Apr 2013 09:33:41 +0300
Subject: [PATCH] Added fade in/fade out for controls in HTML5 videos. Making
 video in the center and not stretched when captions are shown. Added auto
 hide/show for captions. Removed old styling and debug info. Added missing
 initalizations for captions auto show/hide. Fixing bugs. Adding black
 backgorund to video for when it has not yet loaded. Making sure that the
 captions are not shown when in YouTube mode. Added back missing styles for
 captions when in YouTube mode. Code review 1 comments Minor refactoring.
 Documenting. Part 1.

---
 .../xmodule/css/videoalpha/display.scss       |  66 ++++++--
 .../xmodule/js/src/videoalpha/display/bind.js |  19 ---
 .../js/src/videoalpha/display/html5_video.js  |  39 +++--
 .../js/src/videoalpha/display/initialize.js   | 154 ++++++++++++------
 .../src/videoalpha/display/video_caption.js   | 104 +++++++++---
 .../src/videoalpha/display/video_control.js   | 124 ++++++--------
 .../js/src/videoalpha/display/video_player.js |  63 ++++---
 .../display/video_progress_slider.js          |  18 +-
 .../display/video_quality_control.js          |  10 +-
 .../videoalpha/display/video_speed_control.js |  12 +-
 .../display/video_volume_control.js           |  12 +-
 .../lib/xmodule/xmodule/videoalpha_module.py  |   1 -
 lms/templates/videoalpha.html                 |   3 +-
 13 files changed, 370 insertions(+), 255 deletions(-)
 delete mode 100644 common/lib/xmodule/xmodule/js/src/videoalpha/display/bind.js

diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
index ee5b83d274..c677584484 100644
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -10,11 +10,29 @@ div.videoalpha {
   padding: 12px;
   border-radius: 5px;
 
+  div.tc-wrapper {
+    position: relative;
+  }
+
   article.video-wrapper {
     float: left;
     margin-right: flex-gutter(9);
     width: flex-grid(6, 9);
 
+    background-color: black;
+
+    position: relative;
+
+    div.video-player-pre {
+        height: 50px;
+        background-color: black;
+    }
+
+    div.video-player-post {
+        height: 50px;
+        background-color: black;
+    }
+
     section.video-player {
       height: 0;
       overflow: hidden;
@@ -31,15 +49,6 @@ div.videoalpha {
       }
     }
 
-    section.video-roof {
-        background-color: green;
-        z-index: 10000;
-        width: 540px;
-        height: 100px;
-        position: absolute;
-        top: 387px;
-    }
-
     section.video-controls {
       @include clearfix();
       background: #333;
@@ -396,7 +405,6 @@ div.videoalpha {
 
         a.hide-subtitles {
           background: url('../images/cc.png') center no-repeat;
-          color: #797979;
           display: block;
           float: left;
           font-weight: 800;
@@ -419,6 +427,10 @@ div.videoalpha {
           &.off {
             opacity: 0.7;
           }
+
+          background-color: #444;
+          color: #fff;
+          text-decoration: none;
         }
       }
     }
@@ -480,11 +492,39 @@ div.videoalpha {
 
     article.video-wrapper {
       width: flex-grid(9,9);
+
+      background-color: inherit;
+    }
+
+    article.video-wrapper section.video-controls.html5 {
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+      position: absolute;
+    }
+
+    article.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles {
+        background-color: inherit;
+        color: #797979;
+        text-decoration: inherit;
+    }
+
+    article.video-wrapper div.video-player-pre, article.video-wrapper div.video-player-post {
+        height: 0px;
     }
 
     ol.subtitles {
-      width: 0;
-      height: 0;
+        width: 0;
+        height: 0;
+    }
+
+    ol.subtitles.html5 {
+        background-color: rgba(243, 243, 243, 0.5);
+        height: 380px;
+        position: absolute;
+        right: 0;
+        width: 275px;
+        margin-top: 20px;
     }
   }
 
@@ -545,7 +585,7 @@ div.videoalpha {
       background: rgba(#000, .8);
       bottom: 0;
       height: 100%;
-      max-height: 100%;
+      max-height: 460px;
       max-width: flex-grid(3);
       padding: lh();
       position: fixed;
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/bind.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/bind.js
deleted file mode 100644
index a5bdf66af0..0000000000
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/bind.js
+++ /dev/null
@@ -1,19 +0,0 @@
-(function (requirejs, require, define) {
-
-// Bind module.
-define(
-'videoalpha/display/bind.js',
-[],
-function () {
-
-    // bind() function.
-    return function (fn, me) {
-        return function () {
-            return fn.apply(me, arguments);
-        };
-    };
-
-});
-
-}(RequireJS.requirejs, RequireJS.require, RequireJS.define));
-// var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js
index 0b9ff0148a..91f36556b7 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js
@@ -1,6 +1,18 @@
+/**
+ * @file HTML5 video player module. Provides methods to control the in-browser HTML5 video player.
+ *
+ * The goal was to write this module so that it closely resembles the YouTube API. The main reason
+ * for this is because initially the edX video player supported only YouTube videos. When HTML5
+ * support was added, for greater compatibility, and to reduce the amount of code that needed to
+ * be modified, it was decided to write a similar API as the one provided by YouTube.
+ *
+ * @external RequireJS
+ *
+ * @module HTML5Video
+ */
+
 (function (requirejs, require, define) {
 
-// HTML5Video module.
 define(
 'videoalpha/display/html5_video.js',
 [],
@@ -11,7 +23,7 @@ function () {
 
     HTML5Video.Player = (function () {
         Player.prototype.callStateChangeCallback = function () {
-            if ($.isFunction(this.config.events.onStateChange) === true) {
+            if ($.isFunction(this.config.events.onStateChange)) {
                 this.config.events.onStateChange({
                     'data': this.playerState
                 });
@@ -62,7 +74,7 @@ function () {
 
             newSpeed = parseFloat(value);
 
-            if (isFinite(newSpeed) === true) {
+            if (isFinite(newSpeed)) {
                 this.video.playbackRate = value;
             }
         };
@@ -76,10 +88,10 @@ function () {
         /*
          * Constructor function for HTML5 Video player.
          *
-         * @el - A DOM element where the HTML5 player will be inserted (as returned by jQuery(selector) function),
+         * @param {String|Object} el A DOM element where the HTML5 player will be inserted (as returned by jQuery(selector) function),
          * or a selector string which will be used to select an element. This is a required parameter.
          *
-         * @config - An object whose properties will be used as configuration options for the HTML5 video
+         * @param config - An object whose properties will be used as configuration options for the HTML5 video
          * player. This is an optional parameter. In the case if this parameter is missing, or some of the config
          * object's properties are missing, defaults will be used. The available options (and their defaults) are as
          * follows:
@@ -130,14 +142,14 @@ function () {
             }
 
             // A simple test to see that the 'config' is a normal object.
-            if ($.isPlainObject(config) === true) {
+            if ($.isPlainObject(config)) {
                 this.config = config;
             } else {
                 return;
             }
 
             // We should have at least one video source. Otherwise there is no point to continue.
-            if (config.hasOwnProperty('videoSources') === false) {
+            if (!config.videoSources) {
                 return;
             }
 
@@ -154,9 +166,8 @@ function () {
             // Create HTML markup for individual sources of the HTML5 <video> element.
             $.each(sourceStr, function (videoType, videoSource) {
                 if (
-                    (_this.config.videoSources.hasOwnProperty(videoType) === true) &&
-                    (typeof _this.config.videoSources[videoType] === 'string') &&
-                    (_this.config.videoSources[videoType].length > 0)
+                    (_this.config.videoSources[videoType]) &&
+                    (_this.config.videoSources[videoType].length)
                 ) {
                     sourceStr[videoType] =
                         '<source ' +
@@ -174,14 +185,14 @@ function () {
             // Determine the starting and ending time for the video.
             this.start = 0;
             this.end = null;
-            if (config.hasOwnProperty('playerVars') === true) {
+            if (config.playerVars) {
                 this.start = parseFloat(config.playerVars.start);
-                if ((isFinite(this.start) !== true) || (this.start < 0)) {
+                if ((!isFinite(this.start)) || (this.start < 0)) {
                     this.start = 0;
                 }
 
                 this.end = parseFloat(config.playerVars.end);
-                if ((isFinite(this.end) !== true) || (this.end < this.start)) {
+                if ((!isFinite(this.end)) || (this.end < this.start)) {
                     this.end = null;
                 }
             }
@@ -242,7 +253,7 @@ function () {
                 }
                 _this.video.currentTime = _this.start;
 
-                if ($.isFunction(_this.config.events.onReady) === true) {
+                if ($.isFunction(_this.config.events.onReady)) {
                     _this.config.events.onReady(null);
                 }
             }, false);
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/initialize.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/initialize.js
index cd625672ff..25a44aee50 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/initialize.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/initialize.js
@@ -1,16 +1,31 @@
+/**
+ * @file Initialize module works with the JSON config, and sets up various settings, parameters,
+ * variables. After all setup actions are performed, it invokes the video player to play the
+ * specified video. This module must be invoked first. It provides several functions which do not
+ * fit in with other modules.
+ *
+ * @external VideoPlayer
+ *
+ * @module Initialize
+ */
+
 (function (requirejs, require, define) {
 
-// Initialize module.
 define(
 'videoalpha/display/initialize.js',
-[
-    'videoalpha/display/bind.js',
-    'videoalpha/display/video_player.js'
-],
-function (bind, VideoPlayer) {
+['videoalpha/display/video_player.js'],
+function (VideoPlayer) {
 
-    // Initialize() function - what this module "exports".
+    /**
+     * @function
+     *
+     * Initialize module exports this function.
+     *
+     * @param {Object} state A place for all properties, and methods of Video Alpha.
+     * @param {DOM element} element Container of the entire Video Alpha DOM element.
+     */
     return function (state, element) {
+        checkForNativeFunctions();
         makeFunctionsPublic(state);
         renderElements(state, element);
     };
@@ -19,15 +34,19 @@ function (bind, VideoPlayer) {
     // Private functions start here.
     // ***************************************************************
 
-    // function makeFunctionsPublic(state)
-    //
-    //     Functions which will be accessible via 'state' object. When called, these functions will
-    //     get the 'state' object as a context.
+    /**
+     * @function makeFunctionsPublic
+     *
+     * Functions which will be accessible via 'state' object. When called, these functions will get the 'state'
+     * object as a context.
+     *
+     * @param {Object} state A place for all properties, and methods of Video Alpha.
+     */
     function makeFunctionsPublic(state) {
-        state.setSpeed    = bind(setSpeed, state);
-        state.youtubeId   = bind(youtubeId, state);
-        state.getDuration = bind(getDuration, state);
-        state.trigger     = bind(trigger, state);
+        state.setSpeed    = setSpeed.bind(state);
+        state.youtubeId   = youtubeId.bind(state);
+        state.getDuration = getDuration.bind(state);
+        state.trigger     = trigger.bind(state);
     }
 
     // function renderElements(state)
@@ -36,6 +55,8 @@ function (bind, VideoPlayer) {
     //     make the created DOM elements available via the 'state' object. Much easier to work this
     //     way - you don't have to do repeated jQuery element selects.
     function renderElements(state, element) {
+        var onPlayerReadyFunc;
+
         // The parent element of the video, and the ID.
         state.el = $(element).find('.videoalpha');
         state.id = state.el.attr('id').replace(/video_/, '');
@@ -50,8 +71,7 @@ function (bind, VideoPlayer) {
 
             'caption_data_dir':   state.el.data('caption-data-dir'),
             'caption_asset_path': state.el.data('caption-asset-path'),
-            'show_captions':      (state.el.data('show-captions').toString() === 'true'),
-
+            'show_captions':      (state.el.data('show-captions').toString().toLowerCase === 'true'),
             'youtubeStreams':     state.el.data('streams'),
 
             'sub':                state.el.data('sub'),
@@ -61,7 +81,7 @@ function (bind, VideoPlayer) {
         };
 
         // Try to parse YouTube stream ID's. If
-        if (parseYoutubeStreams(state, state.config.youtubeStreams) === true) {
+        if (parseYoutubeStreams(state, state.config.youtubeStreams)) {
             state.videoType = 'youtube';
 
             fetchMetadata(state);
@@ -74,12 +94,14 @@ function (bind, VideoPlayer) {
 
             parseVideoSources(
                 state,
-                state.config.mp4Source,
-                state.config.webmSource,
-                state.config.oggSource
+                {
+                    'mp4': state.config.mp4Source,
+                    'webm': state.config.webmSource,
+                    'ogg': state.config.oggSource
+                }
             );
 
-            if ((typeof state.config.sub !== 'string') || (state.config.sub.length === 0)) {
+            if (!state.config.sub.length) {
                 state.config.sub = '';
                 state.config.show_captions = false;
             }
@@ -108,7 +130,7 @@ function (bind, VideoPlayer) {
         //     state.hide_captions = true | false
         //
         // represents the user's choice of having the subtitles shown or hidden. This choice is stored in cookies.
-        if (state.config.show_captions === true) {
+        if (state.config.show_captions) {
             state.hide_captions = ($.cookie('hide_captions') === 'true');
         } else {
             state.hide_captions = true;
@@ -141,6 +163,8 @@ function (bind, VideoPlayer) {
         // Possible value are: 'visible', 'hiding', and 'invisible'.
         state.controlState = 'visible';
         state.controlHideTimeout = null;
+        state.captionState = 'visible';
+        state.captionHideTimeout = null;
 
         // Launch embedding of actual video content, or set it up so that it will be done as soon as the
         // appropriate video player (YouTube or stand alone HTML5) is loaded, and can handle embedding.
@@ -152,17 +176,10 @@ function (bind, VideoPlayer) {
             ((state.videoType === 'youtube') && (window.YT) && (window.YT.Player)) ||
             (state.videoType === 'html5')
         ) {
-            embed(state);
+            VideoPlayer(state);
         } else {
-            if (state.videoType === 'youtube') {
-                window.onYouTubePlayerAPIReady = function() {
-                    embed(state);
-                };
-            } else { // if (state.videoType === 'html5') {
-                window.onHTML5PlayerAPIReady = function() {
-                    embed(state);
-                };
-            }
+            onPlayerReadyFunc = (state.videoType === 'youtube') ? 'onYouTubePlayerAPIReady' : 'onHTML5PlayerAPIReady';
+            window[onPlayerReadyFunc] = VideoPlayer.bind(window, state);
         }
     }
 
@@ -176,8 +193,10 @@ function (bind, VideoPlayer) {
     //     @return
     //         false: We don't have YouTube video IDs to work with; most likely we have HTML5 video sources.
     //         true: Parsing of YouTube video IDs went OK, and we can proceed onwards to play YouTube videos.
+
+
     function parseYoutubeStreams(state, youtubeStreams) {
-        if ((typeof youtubeStreams !== 'string') || (youtubeStreams.length === 0)) {
+        if (!youtubeStreams.length) {
             return false;
         }
 
@@ -199,18 +218,14 @@ function (bind, VideoPlayer) {
     //
     //     Take the HTML5 sources (URLs of videos), and make them available explictly for each type
     //     of video format (mp4, webm, ogg).
-    function parseVideoSources(state, mp4Source, webmSource, oggSource) {
+    function parseVideoSources(state, sources) {
         state.html5Sources = { 'mp4': null, 'webm': null, 'ogg': null };
 
-        if ((typeof mp4Source === 'string') && (mp4Source.length > 0)) {
-            state.html5Sources.mp4 = mp4Source;
-        }
-        if ((typeof webmSource === 'string') && (webmSource.length > 0)) {
-            state.html5Sources.webm = webmSource;
-        }
-        if ((typeof oggSource === 'string') && (oggSource.length > 0)) {
-            state.html5Sources.ogg = oggSource;
-        }
+        $.each(sources, function (name, source) {
+            if (source.length) {
+                state.html5Sources[name] = source;
+            }
+        });
     }
 
     // function fetchMetadata(state)
@@ -239,12 +254,38 @@ function (bind, VideoPlayer) {
         state.setSpeed($.cookie('video_speed'));
     }
 
-    // function embed(state)
-    //
-    //     This function is called when the current type of video player API becomes available.
-    //     It instantiates the core video module.
-    function embed(state) {
-        VideoPlayer(state);
+    function checkForNativeFunctions() {
+        // The bind function is a recent addition to ECMA-262, 5th edition; as such it may not be present in all
+        // browsers. You can partially work around this by inserting the following code at the beginning of your
+        // scripts, allowing use of much of the functionality of bind() in implementations that do not natively support
+        // it.
+        //
+        // https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
+        if (!Function.prototype.bind) {
+            Function.prototype.bind = function (oThis) {
+                var aArgs, fToBind, fNOP, fBound;
+
+                if (typeof this !== 'function') {
+                    // closest thing possible to the ECMAScript 5 internal IsCallable function
+                    throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+                }
+
+                aArgs = Array.prototype.slice.call(arguments, 1);
+                fToBind = this;
+                fNOP = function () {};
+                fBound = function () {
+                    return fToBind.apply(
+                        this instanceof fNOP && oThis ? this : oThis,
+                        aArgs.concat(Array.prototype.slice.call(arguments))
+                    );
+                };
+
+                fNOP.prototype = this.prototype;
+                fBound.prototype = new fNOP();
+
+                return fBound;
+            };
+        }
     }
 
     // ***************************************************************
@@ -260,7 +301,7 @@ function (bind, VideoPlayer) {
             this.speed = '1.0';
         }
 
-        if (updateCookie !== false) {
+        if (updateCookie) {
             $.cookie('video_speed', this.speed, {
                 'expires': 3650,
                 'path': '/'
@@ -281,7 +322,8 @@ function (bind, VideoPlayer) {
      *     'event'
      *     'method'
      *
-     * Based on this parameter, this function can be used in two ways.
+     *  The default value (if @callType and @eventName are not specified) is 'method'. Based on this parameter, this
+     *  function can be used in two ways.
      *
      *
      *
@@ -337,10 +379,10 @@ function (bind, VideoPlayer) {
         // object/function to trigger/invoke. If the 'objChain' chain of object is
         // incorrect (one of the link is non-existent), then the loop will immediately
         // exit.
-        while (objChain.length > 0) {
+        while (objChain.length) {
             i = objChain.shift();
 
-            if (tmpObj.hasOwnProperty(i) === true) {
+            if (tmpObj.hasOwnProperty(i)) {
                 tmpObj = tmpObj[i];
             } else {
                 // An incorrect object chain was specified.
@@ -349,6 +391,10 @@ function (bind, VideoPlayer) {
             }
         }
 
+        if ((typeof callType === 'undefined') && (typeof eventName === 'undefined')) {
+            callType = 'method';
+        }
+
         // Based on the type, either trigger, or invoke.
         if (callType === 'event') {
             tmpObj.trigger(eventName, extraParameters);
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_caption.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_caption.js
index 995d663c3f..8c8511e7c1 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_caption.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_caption.js
@@ -3,8 +3,8 @@
 // VideoCaption module.
 define(
 'videoalpha/display/video_caption.js',
-['videoalpha/display/bind.js'],
-function (bind) {
+[],
+function () {
 
     // VideoCaption() function - what this module "exports".
     return function (state) {
@@ -24,23 +24,25 @@ function (bind) {
     //     Functions which will be accessible via 'state' object. When called, these functions will
     //     get the 'state' object as a context.
     function makeFunctionsPublic(state) {
-        state.videoCaption.resize              = bind(resize, state);
-        state.videoCaption.toggle              = bind(toggle, state);
-        state.videoCaption.onMouseEnter        = bind(onMouseEnter, state);
-        state.videoCaption.onMouseLeave        = bind(onMouseLeave, state);
-        state.videoCaption.onMovement          = bind(onMovement, state);
-        state.videoCaption.renderCaption       = bind(renderCaption, state);
-        state.videoCaption.captionHeight       = bind(captionHeight, state);
-        state.videoCaption.topSpacingHeight    = bind(topSpacingHeight, state);
-        state.videoCaption.bottomSpacingHeight = bind(bottomSpacingHeight, state);
-        state.videoCaption.scrollCaption       = bind(scrollCaption, state);
-        state.videoCaption.search              = bind(search, state);
-        state.videoCaption.play                = bind(play, state);
-        state.videoCaption.pause               = bind(pause, state);
-        state.videoCaption.seekPlayer          = bind(seekPlayer, state);
-        state.videoCaption.hideCaptions        = bind(hideCaptions, state);
-        state.videoCaption.calculateOffset     = bind(calculateOffset, state);
-        state.videoCaption.updatePlayTime      = bind(updatePlayTime, state);
+        state.videoCaption.autoShowCaptions    = autoShowCaptions.bind(state);
+        state.videoCaption.autoHideCaptions    = autoHideCaptions.bind(state);
+        state.videoCaption.resize              = resize.bind(state);
+        state.videoCaption.toggle              = toggle.bind(state);
+        state.videoCaption.onMouseEnter        = onMouseEnter.bind(state);
+        state.videoCaption.onMouseLeave        = onMouseLeave.bind(state);
+        state.videoCaption.onMovement          = onMovement.bind(state);
+        state.videoCaption.renderCaption       = renderCaption.bind(state);
+        state.videoCaption.captionHeight       = captionHeight.bind(state);
+        state.videoCaption.topSpacingHeight    = topSpacingHeight.bind(state);
+        state.videoCaption.bottomSpacingHeight = bottomSpacingHeight.bind(state);
+        state.videoCaption.scrollCaption       = scrollCaption.bind(state);
+        state.videoCaption.search              = search.bind(state);
+        state.videoCaption.play                = play.bind(state);
+        state.videoCaption.pause               = pause.bind(state);
+        state.videoCaption.seekPlayer          = seekPlayer.bind(state);
+        state.videoCaption.hideCaptions        = hideCaptions.bind(state);
+        state.videoCaption.calculateOffset     = calculateOffset.bind(state);
+        state.videoCaption.updatePlayTime      = updatePlayTime.bind(state);
     }
 
     // function renderElements(state)
@@ -64,6 +66,13 @@ function (bind) {
         });
 
         fetchCaption(state);
+
+        if (state.videoType === 'html5') {
+            state.videoCaption.fadeOutTimeout = 1400;
+
+            state.videoCaption.subtitlesEl.addClass('html5');
+            state.captionHideTimeout = setTimeout(state.videoCaption.autoHideCaptions, state.videoCaption.fadeOutTimeout);
+        }
     }
 
     // function bindHandlers(state)
@@ -85,6 +94,10 @@ function (bind) {
             'DOMMouseScroll',
             state.videoCaption.onMovement
         );
+
+        if (state.videoType === 'html5') {
+            state.el.on('mousemove', state.videoCaption.autoShowCaptions)
+        }
     }
 
     function fetchCaption(state) {
@@ -106,10 +119,6 @@ function (bind) {
     }
 
     function captionURL(state) {
-        console.log('We are inside captionURL() function.');
-        console.log('state.config.caption_asset_path = "' + state.config.caption_asset_path + '".');
-        console.log('state.youtubeId("1.0") = "' + state.youtubeId('1.0') + '".');
-
         return '' + state.config.caption_asset_path + state.youtubeId('1.0') + '.srt.sjson';
     }
 
@@ -119,6 +128,51 @@ function (bind) {
     // The magic private function that makes them available and sets up their context is makeFunctionsPublic().
     // ***************************************************************
 
+    function autoShowCaptions(event) {
+        if (!this.captionsShowLock) {
+            if (!this.captionsHidden) {
+                return;
+            }
+
+            this.captionsShowLock = true;
+
+            if (this.captionState === 'invisible') {
+                this.videoCaption.subtitlesEl.show();
+                this.captionState = 'visible';
+                this.captionHideTimeout = setTimeout(this.videoCaption.autoHideCaptions, this.videoCaption.fadeOutTimeout);
+            } else if (this.captionState === 'hiding') {
+                this.videoCaption.subtitlesEl.stop(true, false);
+                this.videoCaption.subtitlesEl.css('opacity', 1);
+                this.videoCaption.subtitlesEl.show();
+                this.captionState = 'visible';
+                this.captionHideTimeout = setTimeout(this.videoCaption.autoHideCaptions, this.videoCaption.fadeOutTimeout);
+            } else if (this.captionState === 'visible') {
+                clearTimeout(this.captionHideTimeout);
+                this.captionHideTimeout = setTimeout(this.videoCaption.autoHideCaptions, this.videoCaption.fadeOutTimeout);
+            }
+
+            this.captionsShowLock = false;
+        }
+    }
+
+    function autoHideCaptions() {
+        var _this;
+
+        this.captionHideTimeout = null;
+
+        if (!this.captionsHidden) {
+            return;
+        }
+
+        this.captionState = 'hiding';
+
+        _this = this;
+
+        this.videoCaption.subtitlesEl.fadeOut(1000, function () {
+            _this.captionState = 'invisible';
+        });
+    }
+
     function resize() {
         this.videoCaption.subtitlesEl.css({
             'maxHeight': this.videoCaption.captionHeight()
@@ -254,7 +308,7 @@ function (bind) {
         event.preventDefault();
         time = Math.round(Time.convert($(event.target).data('start'), '1.0', this.speed) / 1000);
 
-        this.trigger(['videoPlayer', 'onSeek'], time, 'method');
+        this.trigger(['videoPlayer', 'onSeek'], time);
     }
 
     function calculateOffset(element) {
@@ -281,9 +335,11 @@ function (bind) {
 
     function hideCaptions(hide_captions) {
         if (hide_captions) {
+            this.captionsHidden = true;
             this.videoCaption.hideSubtitlesEl.attr('title', 'Turn on captions');
             this.el.addClass('closed');
         } else {
+            this.captionsHidden = false;
             this.videoCaption.hideSubtitlesEl.attr('title', 'Turn off captions');
             this.el.removeClass('closed');
             this.videoCaption.scrollCaption();
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_control.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_control.js
index 841e65b8d0..e8c2a83c3f 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_control.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_control.js
@@ -3,8 +3,8 @@
 // VideoControl module.
 define(
 'videoalpha/display/video_control.js',
-['videoalpha/display/bind.js'],
-function (bind) {
+[],
+function () {
 
     // VideoControl() function - what this module "exports".
     return function (state) {
@@ -24,14 +24,14 @@ function (bind) {
     //     Functions which will be accessible via 'state' object. When called, these functions will
     //     get the 'state' object as a context.
     function makeFunctionsPublic(state) {
-        state.videoControl.showControls     = bind(showControls, state);
-        state.videoControl.hideControls     = bind(hideControls, state);
-        state.videoControl.play             = bind(play, state);
-        state.videoControl.pause            = bind(pause, state);
-        state.videoControl.togglePlayback   = bind(togglePlayback, state);
-        state.videoControl.toggleFullScreen = bind(toggleFullScreen, state);
-        state.videoControl.exitFullScreen   = bind(exitFullScreen, state);
-        state.videoControl.updateVcrVidTime = bind(updateVcrVidTime, state);
+        state.videoControl.showControls     = showControls.bind(state);
+        state.videoControl.hideControls     = hideControls.bind(state);
+        state.videoControl.play             = play.bind(state);
+        state.videoControl.pause            = pause.bind(state);
+        state.videoControl.togglePlayback   = togglePlayback.bind(state);
+        state.videoControl.toggleFullScreen = toggleFullScreen.bind(state);
+        state.videoControl.exitFullScreen   = exitFullScreen.bind(state);
+        state.videoControl.updateVcrVidTime = updateVcrVidTime.bind(state);
     }
 
     // function renderElements(state)
@@ -41,7 +41,7 @@ function (bind) {
     //     way - you don't have to do repeated jQuery element selects.
     function renderElements(state) {
         var el, qTipConfig;
-
+        // REFACTOR move templates and css to one file- to python part
         el = $(
             '<div class="slider"></div>' +
             '<div>' +
@@ -82,8 +82,12 @@ function (bind) {
             state.videoControl.play();
         }
 
-        state.controlHideTimeout = setTimeout(state.videoControl.hideControls, 3000);
-        state.el.find('.video-roof').on('mousemove', state.videoControl.showControls);
+        if (state.videoType === 'html5') {
+            state.videoControl.fadeOutTimeout = 1400;
+
+            state.videoControl.el.addClass('html5');
+            state.controlHideTimeout = setTimeout(state.videoControl.hideControls, state.videoControl.fadeOutTimeout);
+        }
     }
 
     // function bindHandlers(state)
@@ -93,6 +97,10 @@ function (bind) {
         state.videoControl.playPauseEl.on('click', state.videoControl.togglePlayback);
         state.videoControl.fullScreenEl.on('click', state.videoControl.toggleFullScreen);
         $(document).on('keyup', state.videoControl.exitFullScreen);
+
+        if (state.videoType === 'html5') {
+            state.el.on('mousemove', state.videoControl.showControls)
+        }
     }
 
     // ***************************************************************
@@ -100,61 +108,32 @@ function (bind) {
     // These are available via the 'state' object. Their context ('this' keyword) is the 'state' object.
     // The magic private function that makes them available and sets up their context is makeFunctionsPublic().
     // ***************************************************************
-
+    // REFACTOR document
     function showControls(event) {
-        var elPosition, elWidth, elHeight;
-
-        normalize(event);
-
-        elPosition = this.el.position();
-        elWidth = this.el.width();
-        elHeight = this.el.height();
-
-        if (
-            (event.pageX < elPosition.left) ||
-            (event.pageX > elPosition.left + elWidth) ||
-            (event.pageY < elPosition.top) ||
-            (event.pageY > elPosition.top + elHeight)
-        ) {
-            return;
-        }
-
-        if (this.controlState === 'invisible') {
-            this.videoControl.el.show();
-            this.controlState = 'visible';
-            this.controlHideTimeout = setTimeout(this.videoControl.hideControls, 3000);
-        }/* else if (this.controlState === 'hiding') {
-            this.videoControl.el.stop(true, false);
-            this.videoControl.el.show();
-            this.controlState = 'visible';
-            this.controlHideTimeout = setTimeout(this.videoControl.hideControls, 3000);
-        }*/ else if (this.controlState === 'visible') {
-            clearTimeout(this.controlHideTimeout);
-            this.controlHideTimeout = setTimeout(this.videoControl.hideControls, 3000);
-        }
-
-        this.controlShowLock = false;
-
-        if (this.videoPlayer && this.videoPlayer.player) {
-            (function (event, _this) {
-                var c1;
-                c1 = 0;
-                _this.el.find('#' + _this.id).children().each(function (index, value) {
-                    $(value).trigger(event);
-                    c1 += 1;
-                });
-            }(event, this));
-        }
-
-        return;
-
-        function normalize(event) {
-            if(!event.offsetX) {
-                event.offsetX = (event.pageX - $(event.target).offset().left);
-                event.offsetY = (event.pageY - $(event.target).offset().top);
+        if (!this.controlShowLock) {
+            if (!this.captionsHidden) {
+                return;
             }
 
-            return event;
+            this.controlShowLock = true;
+
+            // Refactor: separate UI state in object. No code duplication.
+            if (this.controlState === 'invisible') {
+                this.videoControl.el.show();
+                this.controlState = 'visible';
+                this.controlHideTimeout = setTimeout(this.videoControl.hideControls, this.videoControl.fadeOutTimeout);
+            } else if (this.controlState === 'hiding') {
+                this.videoControl.el.stop(true, false);
+                this.videoControl.el.css('opacity', 1);
+                this.videoControl.el.show();
+                this.controlState = 'visible';
+                this.controlHideTimeout = setTimeout(this.videoControl.hideControls, this.videoControl.fadeOutTimeout);
+            } else if (this.controlState === 'visible') {
+                clearTimeout(this.controlHideTimeout);
+                this.controlHideTimeout = setTimeout(this.videoControl.hideControls, this.videoControl.fadeOutTimeout);
+            }
+
+            this.controlShowLock = false;
         }
     }
 
@@ -162,6 +141,11 @@ function (bind) {
         var _this;
 
         this.controlHideTimeout = null;
+
+        if (!this.captionsHidden) {
+            return;
+        }
+
         this.controlState = 'hiding';
 
         _this = this;
@@ -185,16 +169,16 @@ function (bind) {
         event.preventDefault();
 
         if (this.videoControl.playPauseState === 'playing') {
-            this.trigger(['videoPlayer', 'pause'], null, 'method');
+            this.trigger(['videoPlayer', 'pause'], null);
         } else { // if (this.videoControl.playPauseState === 'paused') {
-            this.trigger(['videoPlayer', 'play'], null, 'method');
+            this.trigger(['videoPlayer', 'play'], null);
         }
     }
 
     function toggleFullScreen(event) {
         event.preventDefault();
 
-        if (this.videoControl.fullScreenState === true) {
+        if (this.videoControl.fullScreenState) {
             this.videoControl.fullScreenState = false;
             this.el.removeClass('fullscreen');
             this.videoControl.fullScreenEl.attr('title', 'Fill browser');
@@ -204,11 +188,11 @@ function (bind) {
             this.videoControl.fullScreenEl.attr('title', 'Exit fill browser');
         }
 
-        this.trigger(['videoCaption', 'resize'], null, 'method');
+        this.trigger(['videoCaption', 'resize'], null);
     }
 
     function exitFullScreen(event) {
-        if ((this.el.hasClass('fullscreen') === true) && (event.keyCode === 27)) {
+        if ((this.el.hasClass('fullscreen')) && (event.keyCode === 27)) {
             this.videoControl.toggleFullScreen(event);
         }
     }
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.js
index 0db33497d0..daf0e8728b 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.js
@@ -3,11 +3,8 @@
 // VideoPlayer module.
 define(
 'videoalpha/display/video_player.js',
-[
-    'videoalpha/display/html5_video.js',
-    'videoalpha/display/bind.js'
-],
-function (HTML5Video, bind) {
+['videoalpha/display/html5_video.js'],
+function (HTML5Video) {
 
     // VideoPlayer() function - what this module "exports".
     return function (state) {
@@ -27,24 +24,24 @@ function (HTML5Video, bind) {
     //     Functions which will be accessible via 'state' object. When called, these functions will
     //     get the 'state' object as a context.
     function makeFunctionsPublic(state) {
-        state.videoPlayer.pause                       = bind(pause, state);
-        state.videoPlayer.play                        = bind(play, state);
-        state.videoPlayer.update                      = bind(update, state);
-        state.videoPlayer.onSpeedChange               = bind(onSpeedChange, state);
-        state.videoPlayer.onSeek                      = bind(onSeek, state);
-        state.videoPlayer.onEnded                     = bind(onEnded, state);
-        state.videoPlayer.onPause                     = bind(onPause, state);
-        state.videoPlayer.onPlay                      = bind(onPlay, state);
-        state.videoPlayer.onUnstarted                 = bind(onUnstarted, state);
-        state.videoPlayer.handlePlaybackQualityChange = bind(handlePlaybackQualityChange, state);
-        state.videoPlayer.onPlaybackQualityChange     = bind(onPlaybackQualityChange, state);
-        state.videoPlayer.onStateChange               = bind(onStateChange, state);
-        state.videoPlayer.onReady                     = bind(onReady, state);
-        state.videoPlayer.updatePlayTime              = bind(updatePlayTime, state);
-        state.videoPlayer.isPlaying                   = bind(isPlaying, state);
-        state.videoPlayer.log                         = bind(log, state);
-        state.videoPlayer.duration                    = bind(duration, state);
-        state.videoPlayer.onVolumeChange              = bind(onVolumeChange, state);
+        state.videoPlayer.pause                       = pause.bind(state);
+        state.videoPlayer.play                        = play.bind(state);
+        state.videoPlayer.update                      = update.bind(state);
+        state.videoPlayer.onSpeedChange               = onSpeedChange.bind(state);
+        state.videoPlayer.onSeek                      = onSeek.bind(state);
+        state.videoPlayer.onEnded                     = onEnded.bind(state);
+        state.videoPlayer.onPause                     = onPause.bind(state);
+        state.videoPlayer.onPlay                      = onPlay.bind(state);
+        state.videoPlayer.onUnstarted                 = onUnstarted.bind(state);
+        state.videoPlayer.handlePlaybackQualityChange = handlePlaybackQualityChange.bind(state);
+        state.videoPlayer.onPlaybackQualityChange     = onPlaybackQualityChange.bind(state);
+        state.videoPlayer.onStateChange               = onStateChange.bind(state);
+        state.videoPlayer.onReady                     = onReady.bind(state);
+        state.videoPlayer.updatePlayTime              = updatePlayTime.bind(state);
+        state.videoPlayer.isPlaying                   = isPlaying.bind(state);
+        state.videoPlayer.log                         = log.bind(state);
+        state.videoPlayer.duration                    = duration.bind(state);
+        state.videoPlayer.onVolumeChange              = onVolumeChange.bind(state);
     }
 
     // function renderElements(state)
@@ -171,7 +168,7 @@ function (HTML5Video, bind) {
     function update() {
         this.videoPlayer.currentTime = this.videoPlayer.player.getCurrentTime();
 
-        if (isFinite(this.videoPlayer.currentTime) === true) {
+        if (isFinite(this.videoPlayer.currentTime)) {
             this.videoPlayer.updatePlayTime(this.videoPlayer.currentTime);
         }
     }
@@ -214,7 +211,7 @@ function (HTML5Video, bind) {
     }
 
     function onEnded() {
-        this.trigger(['videoControl','pause'], null, 'method');
+        this.trigger(['videoControl','pause'], null);
     }
 
     function onPause() {
@@ -223,7 +220,7 @@ function (HTML5Video, bind) {
         clearInterval(this.videoPlayer.updateInterval);
         delete this.videoPlayer.updateInterval;
 
-        this.trigger(['videoControl','pause'], null, 'method');
+        this.trigger(['videoControl','pause'], null);
     }
 
     function onPlay() {
@@ -233,7 +230,7 @@ function (HTML5Video, bind) {
             this.videoPlayer.updateInterval = setInterval(this.videoPlayer.update, 200);
         }
 
-        this.trigger(['videoControl','play'], null, 'method');
+        this.trigger(['videoControl','play'], null);
     }
 
     function onUnstarted() { }
@@ -247,7 +244,7 @@ function (HTML5Video, bind) {
 
         quality = this.videoPlayer.player.getPlaybackQuality();
 
-        this.trigger(['videoQualityControl', 'onQualityChange'], quality, 'method');
+        this.trigger(['videoQualityControl', 'onQualityChange'], quality);
     }
 
     function onReady() {
@@ -274,7 +271,7 @@ function (HTML5Video, bind) {
                     _this.speeds.push(value.toFixed(2).replace(/\.00$/, '.0'));
                 });
 
-                this.trigger(['videoSpeedControl', 'reRender'], {'newSpeeds': this.speeds, 'currentSpeed': this.speed}, 'method');
+                this.trigger(['videoSpeedControl', 'reRender'], {'newSpeeds': this.speeds, 'currentSpeed': this.speed});
 
                 this.setSpeed($.cookie('video_speed'));
             }
@@ -311,9 +308,9 @@ function (HTML5Video, bind) {
 
         duration = this.videoPlayer.duration();
 
-        this.trigger(['videoProgressSlider', 'updatePlayTime'], {'time': time, 'duration': duration}, 'method');
-        this.trigger(['videoControl', 'updateVcrVidTime'], {'time': time, 'duration': duration}, 'method');
-        this.trigger(['videoCaption', 'updatePlayTime'], time, 'method');
+        this.trigger(['videoProgressSlider', 'updatePlayTime'], {'time': time, 'duration': duration});
+        this.trigger(['videoControl', 'updateVcrVidTime'], {'time': time, 'duration': duration});
+        this.trigger(['videoCaption', 'updatePlayTime'], time);
     }
 
     function isPlaying() {
@@ -324,7 +321,7 @@ function (HTML5Video, bind) {
         var duration;
 
         duration = this.videoPlayer.player.getDuration();
-        if (isFinite(duration) === false) {
+        if (!isFinite(duration)) {
             duration = this.getDuration();
         }
 
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_progress_slider.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_progress_slider.js
index fe38d14382..d2d9af953b 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_progress_slider.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_progress_slider.js
@@ -10,8 +10,8 @@ mind, or whether to act, and in acting, to live."
 // VideoProgressSlider module.
 define(
 'videoalpha/display/video_progress_slider.js',
-['videoalpha/display/bind.js'],
-function (bind) {
+[],
+function () {
 
     // VideoProgressSlider() function - what this module "exports".
     return function (state) {
@@ -31,11 +31,11 @@ function (bind) {
     //     Functions which will be accessible via 'state' object. When called, these functions will
     //     get the 'state' object as a context.
     function makeFunctionsPublic(state) {
-        state.videoProgressSlider.onSlide        = bind(onSlide, state);
-        state.videoProgressSlider.onChange       = bind(onChange, state);
-        state.videoProgressSlider.onStop         = bind(onStop, state);
-        state.videoProgressSlider.updateTooltip  = bind(updateTooltip, state);
-        state.videoProgressSlider.updatePlayTime = bind(updatePlayTime, state);
+        state.videoProgressSlider.onSlide        = onSlide.bind(state);
+        state.videoProgressSlider.onChange       = onChange.bind(state);
+        state.videoProgressSlider.onStop         = onStop.bind(state);
+        state.videoProgressSlider.updateTooltip  = updateTooltip.bind(state);
+        state.videoProgressSlider.updatePlayTime = updatePlayTime.bind(state);
     }
 
     // function renderElements(state)
@@ -98,7 +98,7 @@ function (bind) {
         this.videoProgressSlider.frozen = true;
         this.videoProgressSlider.updateTooltip(ui.value);
 
-        this.trigger(['videoPlayer', 'onSeek'], ui.value, 'method');
+        this.trigger(['videoPlayer', 'onSeek'], ui.value);
     }
 
     function onChange(event, ui) {
@@ -112,7 +112,7 @@ function (bind) {
 
         this.videoProgressSlider.frozen = true;
 
-        this.trigger(['videoPlayer', 'onSeek'], ui.value, 'method');
+        this.trigger(['videoPlayer', 'onSeek'], ui.value);
 
         setTimeout(function() {
             _this.videoProgressSlider.frozen = false;
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_quality_control.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_quality_control.js
index cc82ea9698..370e33ab0f 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_quality_control.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_quality_control.js
@@ -3,8 +3,8 @@
 // VideoQualityControl module.
 define(
 'videoalpha/display/video_quality_control.js',
-['videoalpha/display/bind.js'],
-function (bind) {
+[],
+function () {
 
     // VideoQualityControl() function - what this module "exports".
     return function (state) {
@@ -29,8 +29,8 @@ function (bind) {
     //     Functions which will be accessible via 'state' object. When called, these functions will
     //     get the 'state' object as a context.
     function makeFunctionsPublic(state) {
-        state.videoQualityControl.onQualityChange = bind(onQualityChange, state);
-        state.videoQualityControl.toggleQuality   = bind(toggleQuality, state);
+        state.videoQualityControl.onQualityChange = onQualityChange.bind(state);
+        state.videoQualityControl.toggleQuality   = toggleQuality.bind(state);
     }
 
     // function renderElements(state)
@@ -92,7 +92,7 @@ function (bind) {
             newQuality = 'hd720';
         }
 
-        this.trigger(['videoPlayer', 'handlePlaybackQualityChange'], newQuality, 'method');
+        this.trigger(['videoPlayer', 'handlePlaybackQualityChange'], newQuality);
     }
 
 });
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_speed_control.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_speed_control.js
index ff0917540f..d9a79b2bc3 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_speed_control.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_speed_control.js
@@ -3,8 +3,8 @@
 // VideoSpeedControl module.
 define(
 'videoalpha/display/video_speed_control.js',
-['videoalpha/display/bind.js'],
-function (bind) {
+[],
+function () {
 
     // VideoSpeedControl() function - what this module "exports".
     return function (state) {
@@ -24,9 +24,9 @@ function (bind) {
     //     Functions which will be accessible via 'state' object. When called, these functions will
     //     get the 'state' object as a context.
     function makeFunctionsPublic(state) {
-        state.videoSpeedControl.changeVideoSpeed = bind(changeVideoSpeed, state);
-        state.videoSpeedControl.setSpeed = bind(setSpeed, state);
-        state.videoSpeedControl.reRender = bind(reRender, state);
+        state.videoSpeedControl.changeVideoSpeed = changeVideoSpeed.bind(state);
+        state.videoSpeedControl.setSpeed = setSpeed.bind(state);
+        state.videoSpeedControl.reRender = reRender.bind(state);
     }
 
     // function renderElements(state)
@@ -113,7 +113,7 @@ function (bind) {
                 parseFloat(this.videoSpeedControl.currentSpeed).toFixed(2).replace(/\.00$/, '.0')
             );
 
-            this.trigger(['videoPlayer', 'onSpeedChange'], this.videoSpeedControl.currentSpeed, 'method');
+            this.trigger(['videoPlayer', 'onSpeedChange'], this.videoSpeedControl.currentSpeed);
         }
     }
 
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_volume_control.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_volume_control.js
index 3957734b6c..ed62b3c7b7 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_volume_control.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_volume_control.js
@@ -3,8 +3,8 @@
 // VideoVolumeControl module.
 define(
 'videoalpha/display/video_volume_control.js',
-['videoalpha/display/bind.js'],
-function (bind) {
+[],
+function () {
 
     // VideoVolumeControl() function - what this module "exports".
     return function (state) {
@@ -24,8 +24,8 @@ function (bind) {
     //     Functions which will be accessible via 'state' object. When called, these functions will
     //     get the 'state' object as a context.
     function makeFunctionsPublic(state) {
-        state.videoVolumeControl.onChange = bind(onChange, state);
-        state.videoVolumeControl.toggleMute = bind(toggleMute, state);
+        state.videoVolumeControl.onChange = onChange.bind(state);
+        state.videoVolumeControl.toggleMute = toggleMute.bind(state);
     }
 
     // function renderElements(state)
@@ -54,7 +54,7 @@ function (bind) {
         state.videoVolumeControl.currentVolume = parseInt($.cookie('video_player_volume_level'), 10);
         state.videoVolumeControl.previousVolume = 100;
         if (
-            (isFinite(state.videoVolumeControl.currentVolume) === false) ||
+            (!isFinite(state.videoVolumeControl.currentVolume)) ||
             (state.videoVolumeControl.currentVolume < 0) ||
             (state.videoVolumeControl.currentVolume > 100)
         ) {
@@ -104,7 +104,7 @@ function (bind) {
             'path': '/'
         });
 
-        this.trigger(['videoPlayer', 'onVolumeChange'], ui.value, 'method');
+        this.trigger(['videoPlayer', 'onVolumeChange'], ui.value);
     }
 
     function toggleMute(event) {
diff --git a/common/lib/xmodule/xmodule/videoalpha_module.py b/common/lib/xmodule/xmodule/videoalpha_module.py
index 1b7d0dc1b2..a0a8f395ee 100644
--- a/common/lib/xmodule/xmodule/videoalpha_module.py
+++ b/common/lib/xmodule/xmodule/videoalpha_module.py
@@ -69,7 +69,6 @@ class VideoAlphaModule(VideoAlphaFields, XModule):
 
     js = {
         'js': [
-            resource_string(__name__, 'js/src/videoalpha/display/bind.js'),
             resource_string(__name__, 'js/src/videoalpha/display/initialize.js'),
             resource_string(__name__, 'js/src/videoalpha/display/html5_video.js'),
             resource_string(__name__, 'js/src/videoalpha/display/video_player.js'),
diff --git a/lms/templates/videoalpha.html b/lms/templates/videoalpha.html
index 9d840630d5..f6ed6bfd27 100644
--- a/lms/templates/videoalpha.html
+++ b/lms/templates/videoalpha.html
@@ -29,10 +29,11 @@
 >
 <div class="tc-wrapper">
   <article class="video-wrapper">
+        <div class="video-player-pre"></div>
     <section class="video-player">
       <div id="${id}"></div>
     </section>
-        <section class="video-roof"></section>
+        <div class="video-player-post"></div>
     <section class="video-controls"></section>
   </article>
 </div>