Carried over old work on video alpha 2 to new branch on top of merged video alpha.
This commit is contained in:
Valera Rozuvan
committed by
Vasyl Nakvasiuk
Vasyl Nakvasiuk
parent
cc6ca29bcc
commit
e8d07d5377
19
common/lib/xmodule/xmodule/js/src/videoalpha/display/bind.js
Normal file
19
common/lib/xmodule/xmodule/js/src/videoalpha/display/bind.js
Normal file
@@ -0,0 +1,19 @@
|
||||
(function (requirejs, require, define) {
|
||||
|
||||
// Bind module.
|
||||
define(
|
||||
'videoalpha/display/bind.js',
|
||||
[],
|
||||
function () {
|
||||
|
||||
// bind() function.
|
||||
return function (fn, me) {
|
||||
return function () {
|
||||
return fn.apply(me, arguments);
|
||||
};
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
}(RequireJS.requirejs, RequireJS.require, RequireJS.define));
|
||||
// var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
||||
@@ -1,4 +1,10 @@
|
||||
this.HTML5Video = (function () {
|
||||
(function (requirejs, require, define) {
|
||||
|
||||
// HTML5Video module.
|
||||
define(
|
||||
'videoalpha/display/html5_video.js',
|
||||
[],
|
||||
function () {
|
||||
var HTML5Video;
|
||||
|
||||
HTML5Video = {};
|
||||
@@ -48,10 +54,6 @@ this.HTML5Video = (function () {
|
||||
};
|
||||
|
||||
Player.prototype.getDuration = function () {
|
||||
if (isFinite(this.video.duration) === false) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return this.video.duration;
|
||||
};
|
||||
|
||||
@@ -290,5 +292,8 @@ this.HTML5Video = (function () {
|
||||
'CUED': 5
|
||||
};
|
||||
|
||||
// HTML5Video object - what this module exports.
|
||||
return HTML5Video;
|
||||
}());
|
||||
})
|
||||
|
||||
}(RequireJS.requirejs, RequireJS.require, RequireJS.define));
|
||||
|
||||
@@ -0,0 +1,232 @@
|
||||
(function (requirejs, require, define) {
|
||||
|
||||
// Initialize module.
|
||||
define(
|
||||
'videoalpha/display/initialize.js',
|
||||
['videoalpha/display/bind.js'],
|
||||
function (bind) {
|
||||
|
||||
// Initialize() function - what this module "exports".
|
||||
return function (state, element) {
|
||||
// Functions which will be accessible via 'state' object.
|
||||
makeFunctionsPublic(state);
|
||||
|
||||
// The parent element of the video, and the ID.
|
||||
state.el = $(element).find('.video');
|
||||
state.id = state.el.attr('id').replace(/video_/, '');
|
||||
|
||||
// We store all settings passed to us by the server in one place. These are "read only", so don't
|
||||
// modify them. All variable content lives in 'state' object.
|
||||
state.config = {
|
||||
'element': element,
|
||||
|
||||
'start': state.el.data('start'),
|
||||
'end': state.el.data('end'),
|
||||
|
||||
'caption_data_dir': state.el.data('caption-data-dir'),
|
||||
'caption_asset_path': state.el.data('caption-asset-path'),
|
||||
'show_captions': (state.el.data('show-captions').toString() === 'true'),
|
||||
|
||||
'youtubeStreams': state.el.data('streams'),
|
||||
|
||||
'sub': state.el.data('sub'),
|
||||
'mp4Source': state.el.data('mp4-source'),
|
||||
'webmSource': state.el.data('webm-source'),
|
||||
'oggSource': state.el.data('ogg-source')
|
||||
};
|
||||
|
||||
// Try to parse YouTube stream ID's. If
|
||||
if (parseYoutubeStreams(state, state.config.youtubeStreams) === true) {
|
||||
state.videoType = 'youtube';
|
||||
|
||||
fetchMetadata(state);
|
||||
parseSpeed(state);
|
||||
}
|
||||
|
||||
// If we do not have YouTube ID's, try parsing HTML5 video sources.
|
||||
else {
|
||||
state.videoType = 'html5';
|
||||
|
||||
parseVideoSources(
|
||||
state,
|
||||
state.config.mp4Source,
|
||||
state.config.webmSource,
|
||||
state.config.oggSource
|
||||
);
|
||||
|
||||
if ((typeof state.config.sub !== 'string') || (state.config.sub.length === 0)) {
|
||||
state.config.sub = '';
|
||||
state.config.show_captions = false;
|
||||
}
|
||||
|
||||
state.speeds = ['0.75', '1.0', '1.25', '1.50'];
|
||||
state.videos = {
|
||||
'0.75': state.config.sub,
|
||||
'1.0': state.config.sub,
|
||||
'1.25': state.config.sub,
|
||||
'1.5': state.config.sub
|
||||
};
|
||||
|
||||
state.setSpeed($.cookie('video_speed'));
|
||||
}
|
||||
|
||||
// TODO: Check after refactoring whether this can be removed.
|
||||
state.el.addClass('video-load-complete');
|
||||
|
||||
// Configure displaying of captions.
|
||||
//
|
||||
// Option
|
||||
//
|
||||
// state.config.show_captions = true | false
|
||||
//
|
||||
// defines whether to turn off/on the captions altogether. User will not have the ability to turn them on/off.
|
||||
//
|
||||
// Option
|
||||
//
|
||||
// state.hide_captions = true | false
|
||||
//
|
||||
// represents the user's choice of having the subtitles shown or hidden. This choice is stored in cookies.
|
||||
if (state.config.show_captions === true) {
|
||||
state.hide_captions = ($.cookie('hide_captions') === 'true');
|
||||
} else {
|
||||
state.hide_captions = true;
|
||||
|
||||
$.cookie('hide_captions', state.hide_captions, {
|
||||
expires: 3650,
|
||||
path: '/'
|
||||
});
|
||||
|
||||
state.el.addClass('closed');
|
||||
}
|
||||
|
||||
// Launch embedding of actual video content, or set it up so that it will be done as soon as the
|
||||
// appropriate video player (YouTube or stand alone HTML5) is loaded, and can handle embedding.
|
||||
if (
|
||||
((state.videoType === 'youtube') && (window.YT) && (window.YT.Player)) ||
|
||||
((state.videoType === 'html5') && (window.HTML5Video) && (window.HTML5Video.Player))
|
||||
) {
|
||||
embed(state);
|
||||
} else {
|
||||
if (state.videoType === 'youtube') {
|
||||
window.onYouTubePlayerAPIReady = function() {
|
||||
embed(state);
|
||||
};
|
||||
} else if (state.videoType === 'html5') {
|
||||
window.onHTML5PlayerAPIReady = function() {
|
||||
embed(state);
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Private functions start here.
|
||||
|
||||
function makeFunctionsPublic(state) {
|
||||
state.setSpeed = bind(setSpeed, state);
|
||||
state.youtubeId = bind(youtubeId, state);
|
||||
state.getDuration = bind(getDuration, state);
|
||||
state.log = bind(log, state);
|
||||
}
|
||||
|
||||
function parseYoutubeStreams(state, youtubeStreams) {
|
||||
if ((typeof youtubeStreams !== 'string') || (youtubeStreams.length === 0)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
state.videos = {};
|
||||
|
||||
$.each(youtubeStreams.split(/,/), function(index, video) {
|
||||
var speed;
|
||||
|
||||
video = video.split(/:/);
|
||||
speed = parseFloat(video[0]).toFixed(2).replace(/\.00$/, ".0");
|
||||
|
||||
state.videos[speed] = video[1];
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function parseVideoSources(state, mp4Source, webmSource, oggSource) {
|
||||
state.html5Sources = { 'mp4': null, 'webm': null, 'ogg': null };
|
||||
|
||||
if ((typeof mp4Source === 'string') && (mp4Source.length > 0)) {
|
||||
state.html5Sources.mp4 = mp4Source;
|
||||
}
|
||||
if ((typeof webmSource === 'string') && (webmSource.length > 0)) {
|
||||
state.html5Sources.webm = webmSource;
|
||||
}
|
||||
if ((typeof oggSource === 'string') && (oggSource.length > 0)) {
|
||||
state.html5Sources.ogg = oggSource;
|
||||
}
|
||||
}
|
||||
|
||||
function fetchMetadata(state) {
|
||||
state.metadata = {};
|
||||
|
||||
$.each(state.videos, function (speed, url) {
|
||||
$.get('https://gdata.youtube.com/feeds/api/videos/' + url + '?v=2&alt=jsonc', (function(data) {
|
||||
state.metadata[data.data.id] = data.data;
|
||||
}), 'jsonp');
|
||||
});
|
||||
}
|
||||
|
||||
function parseSpeed(state) {
|
||||
state.speeds = ($.map(state.videos, function(url, speed) {
|
||||
return speed;
|
||||
})).sort();
|
||||
|
||||
state.setSpeed($.cookie('video_speed'));
|
||||
}
|
||||
|
||||
function embed(state) { }
|
||||
|
||||
// Public functions start here.
|
||||
// These are available via the 'state' object. Their context ('this' keyword) is the 'state' object.
|
||||
// The magic private function that makes them available and sets up their context is makeFunctionsPublic().
|
||||
|
||||
function setSpeed(newSpeed) {
|
||||
if (this.speeds.indexOf(newSpeed) !== -1) {
|
||||
this.speed = newSpeed;
|
||||
|
||||
$.cookie('video_speed', '' + newSpeed, {
|
||||
expires: 3650,
|
||||
path: '/'
|
||||
});
|
||||
} else {
|
||||
this.speed = '1.0';
|
||||
}
|
||||
}
|
||||
|
||||
function youtubeId(speed) {
|
||||
return this.videos[speed || this.speed];
|
||||
}
|
||||
|
||||
function getDuration() {
|
||||
return this.metadata[this.youtubeId()].duration;
|
||||
}
|
||||
|
||||
function log(eventName) {
|
||||
var logInfo;
|
||||
|
||||
logInfo = {
|
||||
'id': this.id,
|
||||
'code': this.youtubeId(),
|
||||
'currentTime': this.player.currentTime,
|
||||
'speed': this.speed
|
||||
};
|
||||
|
||||
if (this.videoType === 'youtube') {
|
||||
logInfo.code = this.youtubeId();
|
||||
} else {
|
||||
if (this.videoType === 'html5') {
|
||||
logInfo.code = 'html5';
|
||||
}
|
||||
}
|
||||
|
||||
Logger.log(eventName, logInfo);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}(RequireJS.requirejs, RequireJS.require, RequireJS.define));
|
||||
@@ -0,0 +1,413 @@
|
||||
(function (requirejs, require, define) {
|
||||
|
||||
// VideoPlayer module.
|
||||
define(
|
||||
'videoalpha/display/video_player.js',
|
||||
['videoalpha/display/html5_video.js'],
|
||||
function (HTML5Video) {
|
||||
return function (state) {
|
||||
console.log('HTML5Video object:');
|
||||
console.log(HTML5Video);
|
||||
};
|
||||
});
|
||||
|
||||
}(RequireJS.requirejs, RequireJS.require, RequireJS.define));
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
// Generated by CoffeeScript 1.4.0
|
||||
(function() {
|
||||
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
||||
__hasProp = {}.hasOwnProperty,
|
||||
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
|
||||
|
||||
this.VideoPlayerAlpha = (function(_super) {
|
||||
|
||||
__extends(VideoPlayerAlpha, _super);
|
||||
|
||||
function VideoPlayerAlpha() {
|
||||
this.pause = __bind(this.pause, this);
|
||||
|
||||
this.play = __bind(this.play, this);
|
||||
|
||||
this.toggleFullScreen = __bind(this.toggleFullScreen, this);
|
||||
|
||||
this.update = __bind(this.update, this);
|
||||
|
||||
this.onVolumeChange = __bind(this.onVolumeChange, this);
|
||||
|
||||
this.onSpeedChange = __bind(this.onSpeedChange, this);
|
||||
|
||||
this.onSeek = __bind(this.onSeek, this);
|
||||
|
||||
this.onEnded = __bind(this.onEnded, this);
|
||||
|
||||
this.onPause = __bind(this.onPause, this);
|
||||
|
||||
this.onPlay = __bind(this.onPlay, this);
|
||||
|
||||
this.onUnstarted = __bind(this.onUnstarted, this);
|
||||
|
||||
this.handlePlaybackQualityChange = __bind(this.handlePlaybackQualityChange, this);
|
||||
|
||||
this.onPlaybackQualityChange = __bind(this.onPlaybackQualityChange, this);
|
||||
|
||||
this.onStateChange = __bind(this.onStateChange, this);
|
||||
|
||||
this.onReady = __bind(this.onReady, this);
|
||||
|
||||
this.bindExitFullScreen = __bind(this.bindExitFullScreen, this);
|
||||
return VideoPlayerAlpha.__super__.constructor.apply(this, arguments);
|
||||
}
|
||||
|
||||
VideoPlayerAlpha.prototype.initialize = function() {
|
||||
if (window.OldVideoPlayerAlpha && window.OldVideoPlayerAlpha.onPause) {
|
||||
window.OldVideoPlayerAlpha.onPause();
|
||||
}
|
||||
window.OldVideoPlayerAlpha = this;
|
||||
if (this.video.videoType === 'youtube') {
|
||||
this.PlayerState = YT.PlayerState;
|
||||
this.PlayerState.UNSTARTED = -1;
|
||||
} else if (this.video.videoType === 'html5') {
|
||||
this.PlayerState = HTML5Video.PlayerState;
|
||||
}
|
||||
this.currentTime = 0;
|
||||
return this.el = $("#video_" + this.video.id);
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.bind = function() {
|
||||
$(this.control).bind('play', this.play).bind('pause', this.pause);
|
||||
if (this.video.videoType === 'youtube') {
|
||||
$(this.qualityControl).bind('changeQuality', this.handlePlaybackQualityChange);
|
||||
}
|
||||
if (this.video.show_captions === true) {
|
||||
$(this.caption).bind('seek', this.onSeek);
|
||||
}
|
||||
$(this.speedControl).bind('speedChange', this.onSpeedChange);
|
||||
$(this.progressSlider).bind('seek', this.onSeek);
|
||||
if (this.volumeControl) {
|
||||
$(this.volumeControl).bind('volumeChange', this.onVolumeChange);
|
||||
}
|
||||
$(document).keyup(this.bindExitFullScreen);
|
||||
this.$('.add-fullscreen').click(this.toggleFullScreen);
|
||||
if (!onTouchBasedDevice()) {
|
||||
return this.addToolTip();
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.bindExitFullScreen = function(event) {
|
||||
if (this.el.hasClass('fullscreen') && event.keyCode === 27) {
|
||||
return this.toggleFullScreen(event);
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.render = function() {
|
||||
var prev_player_type, youTubeId;
|
||||
this.control = new VideoControlAlpha({
|
||||
el: this.$('.video-controls')
|
||||
});
|
||||
if (this.video.videoType === 'youtube') {
|
||||
this.qualityControl = new VideoQualityControlAlpha({
|
||||
el: this.$('.secondary-controls')
|
||||
});
|
||||
}
|
||||
if (this.video.show_captions === true) {
|
||||
this.caption = new VideoCaptionAlpha({
|
||||
el: this.el,
|
||||
youtubeId: this.video.youtubeId('1.0'),
|
||||
currentSpeed: this.currentSpeed(),
|
||||
captionAssetPath: this.video.caption_asset_path
|
||||
});
|
||||
}
|
||||
if (!onTouchBasedDevice()) {
|
||||
this.volumeControl = new VideoVolumeControlAlpha({
|
||||
el: this.$('.secondary-controls')
|
||||
});
|
||||
}
|
||||
this.speedControl = new VideoSpeedControlAlpha({
|
||||
el: this.$('.secondary-controls'),
|
||||
speeds: this.video.speeds,
|
||||
currentSpeed: this.currentSpeed()
|
||||
});
|
||||
this.progressSlider = new VideoProgressSliderAlpha({
|
||||
el: this.$('.slider')
|
||||
});
|
||||
this.playerVars = {
|
||||
controls: 0,
|
||||
wmode: 'transparent',
|
||||
rel: 0,
|
||||
showinfo: 0,
|
||||
enablejsapi: 1,
|
||||
modestbranding: 1
|
||||
};
|
||||
if (this.video.start) {
|
||||
this.playerVars.start = this.video.start;
|
||||
this.playerVars.wmode = 'window';
|
||||
}
|
||||
if (this.video.end) {
|
||||
this.playerVars.end = this.video.end;
|
||||
}
|
||||
if (this.video.videoType === 'html5') {
|
||||
this.player = new HTML5Video.Player(this.video.el, {
|
||||
playerVars: this.playerVars,
|
||||
videoSources: this.video.html5Sources,
|
||||
events: {
|
||||
onReady: this.onReady,
|
||||
onStateChange: this.onStateChange
|
||||
}
|
||||
});
|
||||
} else if (this.video.videoType === 'youtube') {
|
||||
prev_player_type = $.cookie('prev_player_type');
|
||||
if (prev_player_type === 'html5') {
|
||||
youTubeId = this.video.videos['1.0'];
|
||||
} else {
|
||||
youTubeId = this.video.youtubeId();
|
||||
}
|
||||
this.player = new YT.Player(this.video.id, {
|
||||
playerVars: this.playerVars,
|
||||
videoId: youTubeId,
|
||||
events: {
|
||||
onReady: this.onReady,
|
||||
onStateChange: this.onStateChange,
|
||||
onPlaybackQualityChange: this.onPlaybackQualityChange
|
||||
}
|
||||
});
|
||||
}
|
||||
if (this.video.show_captions === true) {
|
||||
return this.caption.hideCaptions(this['video'].hide_captions);
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.addToolTip = function() {
|
||||
return this.$('.add-fullscreen, .hide-subtitles').qtip({
|
||||
position: {
|
||||
my: 'top right',
|
||||
at: 'top center'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onReady = function(event) {
|
||||
if (this.video.videoType === 'html5') {
|
||||
this.player.setPlaybackRate(this.video.speed);
|
||||
}
|
||||
if (!onTouchBasedDevice()) {
|
||||
return $('.video-load-complete:first').data('video').player.play();
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onStateChange = function(event) {
|
||||
var availableSpeeds, baseSpeedSubs, prev_player_type, _this;
|
||||
_this = this;
|
||||
switch (event.data) {
|
||||
case this.PlayerState.UNSTARTED:
|
||||
if (this.video.videoType === "youtube") {
|
||||
availableSpeeds = this.player.getAvailablePlaybackRates();
|
||||
prev_player_type = $.cookie('prev_player_type');
|
||||
if (availableSpeeds.length > 1) {
|
||||
if (prev_player_type === 'youtube') {
|
||||
$.cookie('prev_player_type', 'html5', {
|
||||
expires: 3650,
|
||||
path: '/'
|
||||
});
|
||||
this.onSpeedChange(null, '1.0');
|
||||
} else if (prev_player_type !== 'html5') {
|
||||
$.cookie('prev_player_type', 'html5', {
|
||||
expires: 3650,
|
||||
path: '/'
|
||||
});
|
||||
}
|
||||
baseSpeedSubs = this.video.videos["1.0"];
|
||||
$.each(this.video.videos, function(index, value) {
|
||||
return delete _this.video.videos[index];
|
||||
});
|
||||
this.video.speeds = [];
|
||||
$.each(availableSpeeds, function(index, value) {
|
||||
_this.video.videos[value.toFixed(2).replace(/\.00$/, ".0")] = baseSpeedSubs;
|
||||
return _this.video.speeds.push(value.toFixed(2).replace(/\.00$/, ".0"));
|
||||
});
|
||||
this.speedControl.reRender(this.video.speeds, this.video.speed);
|
||||
this.video.videoType = 'html5';
|
||||
this.video.setSpeed($.cookie('video_speed'));
|
||||
this.player.setPlaybackRate(this.video.speed);
|
||||
} else {
|
||||
if (prev_player_type !== 'youtube') {
|
||||
$.cookie('prev_player_type', 'youtube', {
|
||||
expires: 3650,
|
||||
path: '/'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return this.onUnstarted();
|
||||
case this.PlayerState.PLAYING:
|
||||
return this.onPlay();
|
||||
case this.PlayerState.PAUSED:
|
||||
return this.onPause();
|
||||
case this.PlayerState.ENDED:
|
||||
return this.onEnded();
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onPlaybackQualityChange = function(event, value) {
|
||||
var quality;
|
||||
quality = this.player.getPlaybackQuality();
|
||||
return this.qualityControl.onQualityChange(quality);
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.handlePlaybackQualityChange = function(event, value) {
|
||||
return this.player.setPlaybackQuality(value);
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onUnstarted = function() {
|
||||
this.control.pause();
|
||||
if (this.video.show_captions === true) {
|
||||
return this.caption.pause();
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onPlay = function() {
|
||||
this.video.log('play_video');
|
||||
if (!this.player.interval) {
|
||||
this.player.interval = setInterval(this.update, 200);
|
||||
}
|
||||
if (this.video.show_captions === true) {
|
||||
this.caption.play();
|
||||
}
|
||||
this.control.play();
|
||||
return this.progressSlider.play();
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onPause = function() {
|
||||
this.video.log('pause_video');
|
||||
clearInterval(this.player.interval);
|
||||
this.player.interval = null;
|
||||
if (this.video.show_captions === true) {
|
||||
this.caption.pause();
|
||||
}
|
||||
return this.control.pause();
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onEnded = function() {
|
||||
this.control.pause();
|
||||
if (this.video.show_captions === true) {
|
||||
return this.caption.pause();
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onSeek = function(event, time) {
|
||||
this.player.seekTo(time, true);
|
||||
if (this.isPlaying()) {
|
||||
clearInterval(this.player.interval);
|
||||
this.player.interval = setInterval(this.update, 200);
|
||||
} else {
|
||||
this.currentTime = time;
|
||||
}
|
||||
return this.updatePlayTime(time);
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onSpeedChange = function(event, newSpeed) {
|
||||
if (this.video.videoType === 'youtube') {
|
||||
this.currentTime = Time.convert(this.currentTime, parseFloat(this.currentSpeed()), newSpeed);
|
||||
}
|
||||
newSpeed = parseFloat(newSpeed).toFixed(2).replace(/\.00$/, '.0');
|
||||
this.video.setSpeed(newSpeed);
|
||||
if (this.video.videoType === 'youtube') {
|
||||
if (this.video.show_captions === true) {
|
||||
this.caption.currentSpeed = newSpeed;
|
||||
}
|
||||
}
|
||||
if (this.video.videoType === 'html5') {
|
||||
this.player.setPlaybackRate(newSpeed);
|
||||
} else if (this.video.videoType === 'youtube') {
|
||||
if (this.isPlaying()) {
|
||||
this.player.loadVideoById(this.video.youtubeId(), this.currentTime);
|
||||
} else {
|
||||
this.player.cueVideoById(this.video.youtubeId(), this.currentTime);
|
||||
}
|
||||
}
|
||||
if (this.video.videoType === 'youtube') {
|
||||
return this.updatePlayTime(this.currentTime);
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.onVolumeChange = function(event, volume) {
|
||||
return this.player.setVolume(volume);
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.update = function() {
|
||||
if (this.currentTime = this.player.getCurrentTime()) {
|
||||
return this.updatePlayTime(this.currentTime);
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.updatePlayTime = function(time) {
|
||||
var progress;
|
||||
progress = Time.format(time) + ' / ' + Time.format(this.duration());
|
||||
this.$(".vidtime").html(progress);
|
||||
if (this.video.show_captions === true) {
|
||||
this.caption.updatePlayTime(time);
|
||||
}
|
||||
return this.progressSlider.updatePlayTime(time, this.duration());
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.toggleFullScreen = function(event) {
|
||||
event.preventDefault();
|
||||
if (this.el.hasClass('fullscreen')) {
|
||||
this.$('.add-fullscreen').attr('title', 'Fill browser');
|
||||
this.el.removeClass('fullscreen');
|
||||
} else {
|
||||
this.el.addClass('fullscreen');
|
||||
this.$('.add-fullscreen').attr('title', 'Exit fill browser');
|
||||
}
|
||||
if (this.video.show_captions === true) {
|
||||
return this.caption.resize();
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.play = function() {
|
||||
if (this.player.playVideo) {
|
||||
return this.player.playVideo();
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.isPlaying = function() {
|
||||
return this.player.getPlayerState() === this.PlayerState.PLAYING;
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.pause = function() {
|
||||
if (this.player.pauseVideo) {
|
||||
return this.player.pauseVideo();
|
||||
}
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.duration = function() {
|
||||
if (this.video.videoType === "youtube") {
|
||||
return this.video.getDuration();
|
||||
} else if (this.video.videoType === "html5") {
|
||||
return this.player.getDuration();
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.currentSpeed = function() {
|
||||
return this.video.speed;
|
||||
};
|
||||
|
||||
VideoPlayerAlpha.prototype.volume = function(value) {
|
||||
if (value != null) {
|
||||
return this.player.setVolume(value);
|
||||
} else {
|
||||
return this.player.getVolume();
|
||||
}
|
||||
};
|
||||
|
||||
return VideoPlayerAlpha;
|
||||
|
||||
})(SubviewAlpha);
|
||||
|
||||
}).call(this);
|
||||
|
||||
*/
|
||||
20
common/lib/xmodule/xmodule/js/src/videoalpha/main.js
Normal file
20
common/lib/xmodule/xmodule/js/src/videoalpha/main.js
Normal file
@@ -0,0 +1,20 @@
|
||||
(function (requirejs, require, define) {
|
||||
|
||||
// Main module
|
||||
require(
|
||||
['videoalpha/display/initialize.js', 'videoalpha/display/video_player.js'],
|
||||
function (Initialize, VideoPlayer) {
|
||||
window.VideoAlpha = function (element) {
|
||||
var state;
|
||||
|
||||
state = {};
|
||||
|
||||
new Initialize(state, element);
|
||||
new VideoPlayer(state);
|
||||
|
||||
console.log('Finished constructing "state" object. state = ');
|
||||
console.log(state);
|
||||
};
|
||||
});
|
||||
|
||||
}(RequireJS.requirejs, RequireJS.require, RequireJS.define));
|
||||
@@ -68,14 +68,14 @@ class VideoAlphaModule(VideoAlphaFields, XModule):
|
||||
icon_class = 'video'
|
||||
|
||||
js = {
|
||||
'js': [resource_string(__name__, 'js/src/videoalpha/display/html5_video.js')],
|
||||
'coffee':
|
||||
[resource_string(__name__, 'js/src/time.coffee'),
|
||||
resource_string(__name__, 'js/src/videoalpha/display.coffee')] +
|
||||
[resource_string(__name__, 'js/src/videoalpha/display/' + filename)
|
||||
for filename
|
||||
in sorted(resource_listdir(__name__, 'js/src/videoalpha/display'))
|
||||
if filename.endswith('.coffee')]}
|
||||
'js': [
|
||||
resource_string(__name__, 'js/src/videoalpha/display/bind.js'),
|
||||
resource_string(__name__, 'js/src/videoalpha/display/initialize.js'),
|
||||
resource_string(__name__, 'js/src/videoalpha/display/html5_video.js'),
|
||||
resource_string(__name__, 'js/src/videoalpha/display/video_player.js'),
|
||||
resource_string(__name__, 'js/src/videoalpha/main.js')
|
||||
]
|
||||
}
|
||||
css = {'scss': [resource_string(__name__, 'css/videoalpha/display.scss')]}
|
||||
js_module_name = "VideoAlpha"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user