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

Added ability to change playback rate, added pause/play on video click, minor improvements.

Browse Source
This commit is contained in:
Valera Rozuvan
2013-01-31 14:34:36 +02:00
parent 80fa9d0116
commit 4f08d96cfd
3 changed files with 49 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,7 @@ class @VideoAlpha
@setSpeed($.cookie('video_speed'))
$("#video_#{@id}").data('video', this).addClass('video-load-complete')
@hide_captions = $.cookie('hide_captions') == 'true'
_this = this
if ((@videoType is "youtube") and (YT.Player)) or ((@videoType is "html5") and (HTML5Video.Player))
@embed()
else

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

@@ -112,6 +112,28 @@ this.HTML5Video = (function () {
this.video = this.videoEl[0];
this.videoEl.on('click', function (event) {
if (_this.playerState === HTML5Video.PlayerState.PAUSED) {
_this.video.play();
_this.playerState = HTML5Video.PlayerState.PLAYING;
if ($.isFunction(_this.config.events.onStateChange) === true) {
_this.config.events.onStateChange({
'data': _this.playerState
});
}
} else if (_this.playerState === HTML5Video.PlayerState.PLAYING) {
_this.video.pause();
_this.playerState = HTML5Video.PlayerState.PAUSED;
if ($.isFunction(_this.config.events.onStateChange) === true) {
_this.config.events.onStateChange({
'data': _this.playerState
});
}
}
});
this.video.addEventListener('canplay', function () {
_this.playerState = HTML5Video.PlayerState.PAUSED;
@@ -185,12 +207,13 @@ this.HTML5Video = (function () {
};
Player.prototype.pauseVideo = function () {
this.video.pause();
};
Player.prototype.seekTo = function () {
Player.prototype.seekTo = function (value) {
if ((typeof value === 'number') && (value <= this.video.duration) && (value >= 0)) {
this.video.currentTime = value;
}
};
// YouTube API has player.loadVideoById, but since we are working with a video source, we will rename this
@@ -215,8 +238,10 @@ this.HTML5Video = (function () {
this.cueVideoBySource(id);
};
Player.prototype.setVolume = function () {
Player.prototype.setVolume = function (value) {
if ((typeof value === 'number') && (value <= 100) && (value >= 0)) {
this.video.volume = value * 0.01;
}
};
Player.prototype.getCurrentTime = function () {
@@ -232,13 +257,23 @@ this.HTML5Video = (function () {
};
Player.prototype.getVolume = function () {
return this.video.volume;
};
Player.prototype.getDuration = function () {
return this.video.duration;
};
Player.prototype.setSpeed = function (value) {
var newSpeed;
newSpeed = parseFloat(value);
if (isFinite(newSpeed) === true) {
this.video.playbackRate = value;
}
}
return Player;
}());

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

@@ -139,11 +139,13 @@ class @VideoPlayerAlpha extends SubviewAlpha
newSpeed = parseFloat(newSpeed).toFixed(2).replace /\.00$/, '.0'
@video.setSpeed(newSpeed)
@caption.currentSpeed = newSpeed
if @isPlaying()
@player.loadVideoById(@video.youtubeId(), @currentTime)
else
@player.cueVideoById(@video.youtubeId(), @currentTime)
if @video.videoType is 'html5'
@player.setSpeed(newSpeed)
else if @video.videoType is 'youtube'
if @isPlaying()
@player.loadVideoById(@video.youtubeId(), @currentTime)
else
@player.cueVideoById(@video.youtubeId(), @currentTime)
@updatePlayTime @currentTime
onVolumeChange: (event, volume) =>