Fixes and additions. Addressing comments by Carlos for pull request 1409.

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

@@ -8,13 +8,13 @@ class @VideoAlpha
     @caption_asset_path = @el.data('caption-asset-path')
     @show_captions = @el.data('show-captions').toString() == "true"
     @el = $("#video_#{@id}")
-    if @parseVideos(@el.data("streams")) is true
+    if @parseYoutubeId(@el.data("streams")) is true
       @videoType = "youtube"
       @fetchMetadata()
       @parseSpeed()
     else
       @videoType = "html5"
-      @parseVideoSources @el.data('mp4-source'), @el.data('webm-source'), @el.data('ogg-source')
+      @parseHtml5Sources @el.data('mp4-source'), @el.data('webm-source'), @el.data('ogg-source')
       @speeds = ['0.75', '1.0', '1.25', '1.50']
       sub = @el.data('sub')
       if (typeof sub isnt "string") or (sub.length is 0)
@@ -33,32 +33,30 @@ class @VideoAlpha
       @hide_captions = true
       $.cookie('hide_captions', @hide_captions, expires: 3650, path: '/')
       @el.addClass 'closed'
-    _this = this
     if ((@videoType is "youtube") and (YT.Player)) or ((@videoType is "html5") and (HTML5Video.Player))
       @embed()
     else
       if @videoType is "youtube"
-        window.onYouTubePlayerAPIReady = ->
-          _this.embed()
+        window.onYouTubePlayerAPIReady = =>
+          @embed()
       else if @videoType is "html5"
-        window.onHTML5PlayerAPIReady = ->
-          _this.embed()
+        window.onHTML5PlayerAPIReady = =>
+          @embed()
 
   youtubeId: (speed)->
     @videos[speed || @speed]
 
-  parseVideos: (videos)->
+  parseYoutubeId: (videos)->
     return false  if (typeof videos isnt "string") or (videos.length is 0)
     @videos = {}
-    _this = this
-    $.each videos.split(/,/), (index, video) ->
+    $.each videos.split(/,/), (index, video) =>
       speed = undefined
       video = video.split(/:/)
       speed = parseFloat(video[0]).toFixed(2).replace(/\.00$/, ".0")
-      _this.videos[speed] = video[1]
+      @videos[speed] = video[1]
     true
 
-  parseVideoSources: (mp4Source, webmSource, oggSource)->
+  parseHtml5Sources: (mp4Source, webmSource, oggSource)->
     @html5Sources =
       mp4: null
       webm: null
@@ -71,12 +69,14 @@ class @VideoAlpha
     @speeds = ($.map @videos, (url, speed) -> speed).sort()
     @setSpeed $.cookie('video_speed')
 
-  setSpeed: (newSpeed)->
+  setSpeed: (newSpeed, updateCookie)->
     if @speeds.indexOf(newSpeed) isnt -1
       @speed = newSpeed
-      $.cookie "video_speed", "" + newSpeed,
-        expires: 3650
-        path: "/"
+
+      if updateCookie isnt false
+        $.cookie "video_speed", "" + newSpeed,
+          expires: 3650
+          path: "/"
     else
       @speed = "1.0"
 

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

@@ -48,6 +48,10 @@ this.HTML5Video = (function () {
         };
 
         Player.prototype.getDuration = function () {
+            if (isFinite(this.video.duration) === false) {
+                return 0;
+            }
+
             return this.video.duration;
         };
 

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

 class @VideoPlayerAlpha extends SubviewAlpha
   initialize: ->
+    # If we switch verticals while the video is playing, then HTML content is
+    # removed, but JS code is still executing (setInterval() method), and there will
+    # arise conflicts (no HTML content, but code tries to access it). Therefore
+    # we must pause the player (stop setInterval() method).
     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
@@ -99,16 +104,37 @@ class @VideoPlayerAlpha extends SubviewAlpha
     _this = this
     switch event.data
       when @PlayerState.UNSTARTED
+        # Before the video starts playing, let us see if we are in YouTube player,
+        # and if YouTube is in HTML5 mode. If both cases are true, then we can make
+        # it so that speed switching happens natively.
+
         if @video.videoType is "youtube"
+          # Because YouTube API does not have a direct method to determine the mode we
+          # are in (Flash or HTML5), we rely on an indirect method. Currently, when in
+          # Flash mode, YouTube player reports that there is only one (1.0) speed
+          # available. When in HTML5 mode, it reports multiple speeds available. We
+          # will use this fact.
+          #
+          # NOTE: It is my strong belief that in the future YouTube Flash player will
+          # not get speed changes. This is a dying technology. So we can safely use
+          # this indirect method to determine player mode.
           availableSpeeds = @player.getAvailablePlaybackRates()
           prev_player_type = $.cookie('prev_player_type')
           if availableSpeeds.length > 1
+            # If the user last accessed the page and watched a movie via YouTube
+            # player, and it was using Flash mode, then we must reset the current
+            # YouTube speed to 1.0 (by loading appropriate video that is encoded at
+            # 1.0 speed).
             if prev_player_type == 'youtube'
               $.cookie('prev_player_type', 'html5', expires: 3650, path: '/')
-              @onSpeedChange null, '1.0'
+              @onSpeedChange null, '1.0', false
             else if prev_player_type != 'html5'
               $.cookie('prev_player_type', 'html5', expires: 3650, path: '/')
 
+            # Now we must update all the speeds to the ones available via the YouTube
+            # HTML5 API. The default speeds are not exactly the same as reported by
+            # YouTube, so we will remove the default speeds, and populate all the
+            # necessary data with correct available speeds.
             baseSpeedSubs = @video.videos["1.0"]
             $.each @video.videos, (index, value) ->
               delete _this.video.videos[index]
@@ -116,15 +142,26 @@ class @VideoPlayerAlpha extends SubviewAlpha
             $.each availableSpeeds, (index, value) ->
               _this.video.videos[value.toFixed(2).replace(/\.00$/, ".0")] = baseSpeedSubs
               _this.video.speeds.push value.toFixed(2).replace(/\.00$/, ".0")
+
+            # We must update the Speed Control to reflect the new avialble speeds.
             @speedControl.reRender @video.speeds, @video.speed
+
+            # Now we set the videoType to 'HTML5'. This works because my HTML5Video
+            # class is fully compatible with YouTube HTML5 API.
             @video.videoType = 'html5'
 
             @video.setSpeed $.cookie('video_speed')
+
+            # Change the speed to the required one.
             @player.setPlaybackRate @video.speed
           else
+            # We are in YouTube player, and in Flash mode. Check previos mode.
             if prev_player_type != 'youtube'
               $.cookie('prev_player_type', 'youtube', expires: 3650, path: '/')
 
+              # We need to set the proper speed when previous mode was not 'youtube'.
+              @onSpeedChange null, $.cookie('video_speed')
+
         @onUnstarted()
       when @PlayerState.PLAYING
         @onPlay()
@@ -176,11 +213,11 @@ class @VideoPlayerAlpha extends SubviewAlpha
       @currentTime = time
     @updatePlayTime time
 
-  onSpeedChange: (event, newSpeed) =>
+  onSpeedChange: (event, newSpeed, updateCookie) =>
     if @video.videoType is 'youtube'
       @currentTime = Time.convert(@currentTime, parseFloat(@currentSpeed()), newSpeed)
     newSpeed = parseFloat(newSpeed).toFixed(2).replace /\.00$/, '.0'
-    @video.setSpeed newSpeed
+    @video.setSpeed newSpeed, updateCookie
     if @video.videoType is 'youtube'
       if @video.show_captions is true
         @caption.currentSpeed = newSpeed
@@ -230,11 +267,10 @@ class @VideoPlayerAlpha extends SubviewAlpha
     @player.pauseVideo() if @player.pauseVideo
 
   duration: ->
-    if @video.videoType is "youtube"
-      return @video.getDuration()
-    else if @video.videoType is "html5"
-      return @player.getDuration()
-    0
+    duration = @player.getDuration()
+    if isFinite(duration) is false
+      duration = @video.getDuration()
+    duration
 
   currentSpeed: ->
     @video.speed