Fixed bugs. Removed unnecessary things from HTML5. Minor improvements. Subtitles now work in HTML5 if specified.

common/lib/xmodule/xmodule/js/src/videoalpha/display.coffee

@@ -6,8 +6,7 @@ class @VideoAlpha
     @end = @el.data('end')
     @caption_data_dir = @el.data('caption-data-dir')
     @caption_asset_path = @el.data('caption-asset-path')
-    @show_captions = @el.data('show-captions') == "true"
-    window.player = null
+    @show_captions = @el.data('show-captions').toString() == "true"
     @el = $("#video_#{@id}")
     if @parseVideos(@el.data("streams")) is true
       @videoType = "youtube"

common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js

@@ -15,9 +15,6 @@ this.HTML5Video = (function () {
          * follows:
          *
          *     config = {
-         *         'width': 640,
-         *
-         *         'height': 390,
          *
          *         'videoSources': {},   // An object of with properties being video sources. The property name is the
          *                               // video format of the source. Supported video formats are: 'mp4', 'webm', and
@@ -26,11 +23,7 @@ this.HTML5Video = (function () {
          *                               // 'videoSource' option, you can later call loadVideoBySource() method to load
          *                               // a video and start playing it.
          *
-         *          'playerVars': {     // Object's properties identify player parameters.
-         *
-         *              'controls': 1,  // Possible values: 0, or 1. Value of 1 will enable the default browser video
-         *                              // controls.
-         *
+         *          'playerVars': {     // Object's properties identify player parameters.         *
          *              'start': null,  // Possible values: positive integer. Position from which to start playing the
          *                              // video. Measured in seconds. If value is null, or 'start' property is not
          *                              // specified, the video will start playing from the beginning.
@@ -47,8 +40,7 @@ this.HTML5Video = (function () {
          *                              // called for that event.
          *
          *              'onReady': null,
-         *              'onStateChange': null,
-         *              'onPlaybackQualityChange': null
+         *              'onStateChange': null
          *          }
          *     }
          */
@@ -172,40 +164,6 @@ this.HTML5Video = (function () {
             this.videoEl.appendTo(this.el.find('.video-player div'));
         }
 
-        /*
-         * This function returns the quality of the video. Possible return values are (type String)
-         *
-         *     highres
-         *     hd1080
-         *     hd720
-         *     large
-         *     medium
-         *     small
-         *
-         * It returns undefined if there is no current video.
-         *
-         * If there is a current video, but it is impossible to determine it's quality, the function will return
-         * 'medium'.
-         */
-        Player.prototype.getPlayBackQuality = function () {
-            if (this.config.videoSource === '') {
-                return undefined;
-            }
-
-            // TODO: Figure out if we can get the quality of a video from a source (when it is loaded by the browser).
-
-            return 'medium';
-        };
-
-        /*
-         * The original YouTube API function player.setPlaybackQuality changed (if it was possible) the quality of the
-         * played video. In our case, this function will not do anything because we can't change the quality of HTML5
-         * video since we only get one source of video with one quality.
-         */
-        Player.prototype.setPlaybackQuality = function (value) {
-
-        };
-
         Player.prototype.pauseVideo = function () {
             this.video.pause();
         };
@@ -216,28 +174,6 @@ this.HTML5Video = (function () {
             }
         };
 
-        // YouTube API has player.loadVideoById, but since we are working with a video source, we will rename this
-        // function accordingly. However, not to cause conflicts, there will also be a loadVideoById function which
-        // will call this function.
-        Player.prototype.loadVideoBySource = function (source) {
-
-        };
-
-        Player.prototype.loadVideoById = function (id) {
-            this.loadVideoBySource(id);
-        }
-
-        // YouTube API has player.cueVideoById, but since we are working with a video source, we will rename this
-        // function accordingly. However, not to cause conflicts, there will also be a cueVideoById function which
-        // will call this function.
-        Player.prototype.cueVideoBySource = function (source) {
-
-        };
-
-        Player.prototype.cueVideoById = function (id) {
-            this.cueVideoBySource(id);
-        };
-
         Player.prototype.setVolume = function (value) {
             if ((typeof value === 'number') && (value <= 100) && (value >= 0)) {
                 this.video.volume = value * 0.01;
@@ -253,7 +189,7 @@ this.HTML5Video = (function () {
         };
 
         Player.prototype.getPlayerState = function () {
-
+            return this.playerState;
         };
 
         Player.prototype.getVolume = function () {
@@ -272,7 +208,11 @@ this.HTML5Video = (function () {
             if (isFinite(newSpeed) === true) {
                 this.video.playbackRate = value;
             }
-        }
+        };
+
+        Player.prototype.getAvailablePlaybackRates = function () {
+            return [0.75, 1.0, 1.25, 1.5];
+        };
 
         return Player;
     }());

common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee

@@ -1,5 +1,8 @@
 class @VideoPlayerAlpha extends SubviewAlpha
   initialize: ->
+    if (window.OldVideoPlayerAlpha) and (window.OldVideoPlayerAlpha.onPause)
+      window.OldVideoPlayerAlpha.onPause()
+    window.OldVideoPlayerAlpha = this
     if @video.videoType is 'youtube'
       @PlayerState = YT.PlayerState
       # Define a missing constant of Youtube API
@@ -11,10 +14,10 @@ class @VideoPlayerAlpha extends SubviewAlpha
     @el = $("#video_#{@video.id}")
 
   bind: ->
-    console.log "show_captions = #{@video.show_captions}"
     $(@control).bind('play', @play)
       .bind('pause', @pause)
-    $(@qualityControl).bind('changeQuality', @handlePlaybackQualityChange)
+    if @video.videoType is 'youtube'
+      $(@qualityControl).bind('changeQuality', @handlePlaybackQualityChange)
     if @video.show_captions is true
       $(@caption).bind('seek', @onSeek)
     $(@speedControl).bind('speedChange', @onSpeedChange)
@@ -32,7 +35,8 @@ class @VideoPlayerAlpha extends SubviewAlpha
 
   render: ->
     @control = new VideoControlAlpha el: @$('.video-controls')
-    @qualityControl = new VideoQualityControlAlpha el: @$('.secondary-controls')
+    if @video.videoType is 'youtube'
+      @qualityControl = new VideoQualityControlAlpha el: @$('.secondary-controls')
     if @video.show_captions is true
       @caption = new VideoCaptionAlpha
         el: @el
@@ -63,7 +67,6 @@ class @VideoPlayerAlpha extends SubviewAlpha
         events:
           onReady: @onReady
           onStateChange: @onStateChange
-          onPlaybackQualityChange: @onPlaybackQualityChange
     else if @video.videoType is 'youtube'
       @player = new YT.Player @video.id,
         playerVars: @playerVars
@@ -110,8 +113,6 @@ class @VideoPlayerAlpha extends SubviewAlpha
 
   onPlay: =>
     @video.log 'play_video'
-    window.player.pauseVideo() if window.player && window.player != @player
-    window.player = @player
     unless @player.interval
       @player.interval = setInterval(@update, 200)
     if @video.show_captions is true
@@ -121,7 +122,6 @@ class @VideoPlayerAlpha extends SubviewAlpha
 
   onPause: =>
     @video.log 'pause_video'
-    window.player = null if window.player == @player
     clearInterval(@player.interval)
     @player.interval = null
     if @video.show_captions is true