Enabled play/pause buttons for HTML5 video player.

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

@@ -19,7 +19,7 @@ this.HTML5Video = (function () {
          *
          *         'height': 390,
          *
-         *         'videoSources': null, // An object of with properties being video sources. The property name is the
+         *         '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
          *                               // 'ogg'. By default videoSources property is null. This means that the
          *                               // player will initialize, and not play anything. If you do not provide a
@@ -53,12 +53,14 @@ this.HTML5Video = (function () {
          *     }
          */
         function Player(el, config) {
+            var sourceStr, _this;
+
             if (typeof el === 'string') {
                 this.el = $(el);
-            } else if ($.isPlainObject(el) === true) {
+            } else if (el instanceof jQuery) {
                 this.el = el;
             } else {
-                // Error. el parameter is required.
+                // Error. Parameter el does not have a recognized type.
 
                 // TODO: Make sure that nothing breaks if one of the methods available via this object's prototype
                 // is called after we return.
@@ -69,22 +71,99 @@ this.HTML5Video = (function () {
             if ($.isPlainObject(config) === true) {
                 this.config = config;
             } else {
-                this.config = {
-                    'width': 640,
-                    'height': 390,
-                    'videoSource': '',
-                    'playerVars': {
-                        'controls': 1,
-                        'start': null,
-                        'end': null
-                    },
-                    'events': {
-                        'onReady': null,
-                        'onStateChange': null,
-                        'onPlaybackQualityChange': null
-                    }
-                };
+                // Error. Parameter config does not have a recognized type.
+
+                // TODO: Make sure that nothing breaks if one of the methods available via this object's prototype
+                // is called after we return.
+
+                return;
             }
+
+            sourceStr = {
+                'mp4': ' ',
+                'webm': ' ',
+                'ogg': ' '
+            };
+
+            _this = this;
+            $.each(sourceStr, function (videoType, videoSource) {
+                if (
+                    (_this.config.videoSources.hasOwnProperty(videoType) === true) &&
+                    (typeof _this.config.videoSources[videoType] === 'string') &&
+                    (_this.config.videoSources[videoType].length > 0)
+                ) {
+                    sourceStr[videoType] =
+                        '<source ' +
+                            'src="' + _this.config.videoSources[videoType] + '" ' +
+                            'type="video/' + videoType + '" ' +
+                        '/> ';
+                }
+            });
+
+            this.playerState = HTML5Video.PlayerState.UNSTARTED;
+
+            this.videoEl = $(
+                '<video style="width: 100%;">' +
+                    sourceStr.mp4 +
+                    sourceStr.webm +
+                    sourceStr.ogg +
+                '</video>'
+            );
+
+            this.video = this.videoEl[0];
+
+            this.video.addEventListener('canplay', function () {
+                console.log('We got a "canplay" event.');
+
+                _this.playerState = HTML5Video.PlayerState.PAUSED;
+
+                if ($.isFunction(_this.config.events.onReady) === true) {
+                    console.log('Callback function "onReady" is defined.');
+
+                    _this.config.events.onReady({});
+                }
+            }, false);
+            this.video.addEventListener('play', function () {
+                console.log('We got a "play" event.');
+
+                _this.playerState = HTML5Video.PlayerState.PLAYING;
+
+                if ($.isFunction(_this.config.events.onStateChange) === true) {
+                    console.log('Callback function "onStateChange" is defined.');
+
+                    _this.config.events.onStateChange({
+                        'data': _this.playerState
+                    });
+                }
+            }, false);
+            this.video.addEventListener('pause', function () {
+                console.log('We got a "pause" event.');
+
+                _this.playerState = HTML5Video.PlayerState.PAUSED;
+
+                if ($.isFunction(_this.config.events.onStateChange) === true) {
+                    console.log('Callback function "onStateChange" is defined.');
+
+                    _this.config.events.onStateChange({
+                        'data': _this.playerState
+                    });
+                }
+            }, false);
+            this.video.addEventListener('ended', function () {
+                console.log('We got a "ended" event.');
+
+                _this.playerState = HTML5Video.PlayerState.ENDED;
+
+                if ($.isFunction(_this.config.events.onStateChange) === true) {
+                    console.log('Callback function "onStateChange" is defined.');
+
+                    _this.config.events.onStateChange({
+                        'data': _this.playerState
+                    });
+                }
+            }, false);
+
+            this.videoEl.appendTo(this.el.find('.video-player div'));
         }
 
         /*
@@ -122,7 +201,9 @@ this.HTML5Video = (function () {
         };
 
         Player.prototype.pauseVideo = function () {
+            console.log('Player.prototype.pauseVideo');
 
+            this.video.pause();
         };
 
         Player.prototype.seekTo = function () {
@@ -160,21 +241,15 @@ this.HTML5Video = (function () {
         };
 
         Player.prototype.playVideo = function () {
+            console.log('Player.prototype.playVideo');
 
+            this.video.play();
         };
 
         Player.prototype.getPlayerState = function () {
 
         };
 
-        Player.prototype.pauseVideo = function () {
-
-        };
-
-        Player.prototype.setVolume = function () {
-
-        };
-
         Player.prototype.getVolume = function () {
 
         };

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

 class @VideoPlayerAlpha extends SubviewAlpha
   initialize: ->
     if @video.videoType is 'youtube'
+      @PlayerState = YT.PlayerState
       # Define a missing constant of Youtube API
-      YT.PlayerState.UNSTARTED = -1
+      @PlayerState.UNSTARTED = -1
+    else if @video.videoType is 'html5'
+      @PlayerState = HTML5Video.PlayerState
 
     @currentTime = 0
     @el = $("#video_#{@video.id}")
@@ -51,7 +54,7 @@ class @VideoPlayerAlpha extends SubviewAlpha
       # work in AS3, not HMLT5. but iframe use AS3
       @playerVars.end = @video.end
     if @video.videoType is 'html5'
-      @player = new HTML5Video.Player @video.id,
+      @player = new HTML5Video.Player @video.el,
         playerVars: @playerVars,
         videoSources: @video.html5Sources,
         events:
@@ -80,13 +83,13 @@ class @VideoPlayerAlpha extends SubviewAlpha
 
   onStateChange: (event) =>
     switch event.data
-      when YT.PlayerState.UNSTARTED
+      when @PlayerState.UNSTARTED
         @onUnstarted()
-      when YT.PlayerState.PLAYING
+      when @PlayerState.PLAYING
         @onPlay()
-      when YT.PlayerState.PAUSED
+      when @PlayerState.PAUSED
         @onPause()
-      when YT.PlayerState.ENDED
+      when @PlayerState.ENDED
         @onEnded()
 
   onPlaybackQualityChange: (event, value) =>
@@ -168,12 +171,16 @@ class @VideoPlayerAlpha extends SubviewAlpha
 
   # Delegates
   play: =>
+    console.log 'Play clicked'
+    console.log @player.playVideo
     @player.playVideo() if @player.playVideo
 
   isPlaying: ->
-    @player.getPlayerState() == YT.PlayerState.PLAYING
+    @player.getPlayerState() == @PlayerState.PLAYING
 
   pause: =>
+    console.log 'Pause clicked'
+    console.log @player.pauseVideo
     @player.pauseVideo() if @player.pauseVideo
 
   duration: ->

lms/templates/videoalpha.html

@@ -2,8 +2,6 @@
   <h2> ${display_name} </h2>
 % endif
 
-<!-- data-streams="0.75:aHUgdwyxTF0,1.0:yJzQiemCIuY,1.25:ELCdMiV1tCQ,1.5:-7gIpfrQdAI"-->
-
 %if settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
   <div id="stub_out_video_for_testing"></div>
 %else: