diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js b/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js
index c61d725e5c..05a2e97bf4 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js
+++ b/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] =
+ ' ';
+ }
+ });
+
+ this.playerState = HTML5Video.PlayerState.UNSTARTED;
+
+ this.videoEl = $(
+ ''
+ );
+
+ 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 () {
};
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee
index f295096388..f7f90971df 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee
@@ -1,8 +1,11 @@
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: ->
diff --git a/lms/templates/videoalpha.html b/lms/templates/videoalpha.html
index 932d247c61..9d146a222c 100644
--- a/lms/templates/videoalpha.html
+++ b/lms/templates/videoalpha.html
@@ -2,8 +2,6 @@
${display_name}
% endif
-
-
%if settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
%else: