'pause_video' event should emit in addition to the 'stop_video' when user watches the video completely (For Youtube videos)

TNL-2167

common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js

@@ -196,6 +196,29 @@ function (VideoPlayer) {
             });
         });
 
+        describe('onStateChange Youtube', function(){
+            describe('when the video is ended', function () {
+                beforeEach(function () {
+                    state = jasmine.initializePlayerYouTube();
+
+                    state.videoEl = $('video, iframe');
+                    spyOn($.fn, 'trigger').andCallThrough();
+                    state.videoPlayer.onStateChange({
+                        data: YT.PlayerState.ENDED
+                    });
+                });
+
+                it('pause the video control', function () {
+                    expect($('.video_control')).toHaveClass('play');
+                });
+
+                it('trigger pause and ended events', function () {
+                    expect($.fn.trigger).toHaveBeenCalledWith('pause', {});
+                    expect($.fn.trigger).toHaveBeenCalledWith('ended', {});
+                });
+            });
+        });
+
         describe('onStateChange', function () {
             describe('when the video is unstarted', function () {
                 beforeEach(function () {

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

@@ -553,6 +553,11 @@ function (HTML5Video, Resizer) {
         // `duration`. In this case, slider doesn't reach the end point of
         // timeline.
         this.videoPlayer.updatePlayTime(time);
+
+        // Emit 'pause_video' event when a video ends if Player is of Youtube
+        if (this.isYoutubeType()) {
+            this.el.trigger('pause', arguments);
+        }
         this.el.trigger('ended', arguments);
     }