Merge pull request #1527 from edx/anton/video-speed-change-bug

Video player: speed change bug

CHANGELOG.rst

@@ -5,6 +5,8 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Blades: Fix bug when the speed can only be changed when the video is playing.
+
 LMS: Change bulk email implementation to use less memory, and to better handle
 duplicate tasks in celery.
 

common/lib/xmodule/xmodule/js/src/video/02_html5_video.js

@@ -210,11 +210,11 @@ function () {
             // Attach a 'click' event on the <video> element. It will cause the video to pause/play.
             this.videoEl.on('click', function (event) {
                 if (_this.playerState === HTML5Video.PlayerState.PAUSED) {
-                    _this.video.play();
+                    _this.playVideo();
                     _this.playerState = HTML5Video.PlayerState.PLAYING;
                     _this.callStateChangeCallback();
                 } else if (_this.playerState === HTML5Video.PlayerState.PLAYING) {
-                    _this.video.pause();
+                    _this.pauseVideo();
                     _this.playerState = HTML5Video.PlayerState.PAUSED;
                     _this.callStateChangeCallback();
                 }
@@ -270,19 +270,6 @@ function () {
                 _this.callStateChangeCallback();
             }, false);
 
-            // Register the 'timeupdate' event. This is the place where we control when the video ends.
-            // If an ending time was specified, then after the video plays through to this spot, pauses, we
-            // must make sure to update the ending time to the end of the video. This way, the user can watch
-            // any parts of it afterwards.
-            this.video.addEventListener('timeupdate', function (data) {
-                if (_this.end < _this.video.currentTime) {
-                    // When we call video.pause(), a 'pause' event will be formed, and we will catch it
-                    // in another handler (see above).
-                    _this.video.pause();
-                    _this.end = _this.video.duration;
-                }
-            }, false);
-
             // Place the <video> element on the page.
             this.videoEl.appendTo(this.el.find('.video-player div'));
         }

common/lib/xmodule/xmodule/js/src/video/03_video_player.js

@@ -62,6 +62,14 @@ function (HTML5Video, Resizer) {
     function _initialize(state) {
         var youTubeId;
 
+        // The function is called just once to apply pre-defined configurations
+        // by student before video starts playing. Waits until the video's metadata
+        // is loaded, which normally happens just after the video starts playing.
+        // Just after that configurations can be applied.
+        state.videoPlayer.ready = _.once(function () {
+            state.videoPlayer.onSpeedChange(state.speed);
+        });
+
         if (state.videoType === 'youtube') {
             state.videoPlayer.PlayerState = YT.PlayerState;
             state.videoPlayer.PlayerState.UNSTARTED = -1;
@@ -314,6 +322,8 @@ function (HTML5Video, Resizer) {
         if (this.config.show_captions) {
             this.trigger('videoCaption.play', null);
         }
+
+        this.videoPlayer.ready();
     }
 
     function onUnstarted() { }

common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js

@@ -181,13 +181,16 @@ function () {
     // Changed for tests -- JM: Check if it is the cause of Chrome Bug Valera
     // noticed
     function updatePlayTime(params) {
+        var time = Math.floor(params.time),
+            duration = Math.floor(params.duration);
+
         if (
             (this.videoProgressSlider.slider) &&
             (!this.videoProgressSlider.frozen)
         ) {
             this.videoProgressSlider.slider
-                .slider('option', 'max', params.duration)
-                .slider('option', 'value', params.time);
+                .slider('option', 'max', duration)
+                .slider('option', 'value', time);
         }
     }