Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enabled play/pause buttons for HTML5 video player.

Browse Source
This commit is contained in:
Valera Rozuvan
2013-01-31 12:48:03 +02:00
parent 786c11484e
commit 067f2e97f5
3 changed files with 115 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
common/lib/xmodule/xmodule/js/src/videoalpha/display/html5_video.js
View File

@@ -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 () {
};

21
common/lib/xmodule/xmodule/js/src/videoalpha/display/video_player.coffee
View File

@@ -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: ->

2
lms/templates/videoalpha.html
View File

@@ -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: