You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
391 lines
11 KiB
391 lines
11 KiB
/* ******************************
|
|
Module - Video Component
|
|
Author: Jack Lukic
|
|
Notes: First Commit June 30, 2012
|
|
|
|
This is a video playlist and video embed plugin which helps
|
|
provide helpers for adding embed code for vimeo and youtube and
|
|
abstracting event handlers for each library
|
|
|
|
****************************** */
|
|
|
|
;(function ($, window, document, undefined) {
|
|
|
|
$.fn.video = function(parameters) {
|
|
|
|
var
|
|
settings = $.extend(true, {}, $.fn.video.settings, parameters),
|
|
// make arguments available
|
|
moduleArguments = arguments || false,
|
|
invokedResponse
|
|
;
|
|
|
|
$(this)
|
|
.each(function() {
|
|
var
|
|
$module = $(this),
|
|
$placeholder = $module.find(settings.selector.placeholder),
|
|
$playButton = $module.find(settings.selector.playButton),
|
|
$embed = $module.find(settings.selector.embed),
|
|
|
|
element = this,
|
|
instance = $module.data('module-' + settings.namespace),
|
|
methodInvoked = (typeof parameters == 'string'),
|
|
|
|
namespace = settings.namespace,
|
|
metadata = settings.metadata,
|
|
className = settings.className,
|
|
|
|
module
|
|
;
|
|
|
|
module = {
|
|
|
|
initialize: function() {
|
|
module.debug('Initializing video');
|
|
$placeholder
|
|
.off('.video')
|
|
.on('click.' + namespace, module.play)
|
|
;
|
|
$playButton
|
|
.off('.video')
|
|
.on('click.' + namespace, module.play)
|
|
;
|
|
$module
|
|
.data('module-' + namespace, module)
|
|
;
|
|
},
|
|
|
|
// sets new video
|
|
change: function(source, flv) {
|
|
module.debug('Changing video to ', flv);
|
|
$module
|
|
.data(metadata.source, source)
|
|
.data(metadata.flv, flv)
|
|
;
|
|
settings.onChange();
|
|
},
|
|
|
|
// clears video embed
|
|
reset: function() {
|
|
module.debug('Clearing video embed and showing placeholder');
|
|
$module
|
|
.removeClass(className.active)
|
|
;
|
|
$embed
|
|
.html(' ')
|
|
;
|
|
$placeholder
|
|
.show()
|
|
;
|
|
settings.onReset();
|
|
},
|
|
|
|
// plays current video
|
|
play: function() {
|
|
module.debug('Playing video');
|
|
var
|
|
source = $module.data(metadata.source),
|
|
flv = $module.data(metadata.flv)
|
|
;
|
|
$embed
|
|
.html( module.generate.html(source, flv) )
|
|
;
|
|
$module
|
|
.addClass(className.active)
|
|
;
|
|
settings.onPlay();
|
|
},
|
|
|
|
generate: {
|
|
// generates iframe html
|
|
html: function(source, flv) {
|
|
module.debug('Generating embed html');
|
|
var
|
|
width = (settings.width == 'auto')
|
|
? $module.width()
|
|
: settings.width,
|
|
height = (settings.height == 'auto')
|
|
? $module.height()
|
|
: settings.height,
|
|
html
|
|
;
|
|
if(source == 'vimeo') {
|
|
html = ''
|
|
+ '<iframe src="http://player.vimeo.com/video/' + flv + '?=' + module.generate.url(source) + '"'
|
|
+ ' width="' + width + '" height="' + height + '"'
|
|
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
|
|
;
|
|
}
|
|
else if(source == 'youtube') {
|
|
html = ''
|
|
+ '<iframe src="http://www.youtube.com/embed/' + flv + '?=' + module.generate.url(source) + '"'
|
|
+ ' width="' + width + '" height="' + height + '"'
|
|
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
|
|
;
|
|
}
|
|
return html;
|
|
},
|
|
|
|
// generate url parameters
|
|
url: function(source) {
|
|
var
|
|
api = (settings.api)
|
|
? 1
|
|
: 0,
|
|
autoplay = (settings.autoplay)
|
|
? 1
|
|
: 0,
|
|
hd = (settings.hd)
|
|
? 1
|
|
: 0,
|
|
showUI = (settings.showUI)
|
|
? 1
|
|
: 0,
|
|
// opposite used for some params
|
|
hideUI = !(settings.showUI)
|
|
? 1
|
|
: 0,
|
|
url = ''
|
|
;
|
|
if(source == 'vimeo') {
|
|
url = ''
|
|
+ 'api=' + api
|
|
+ '&title=' + showUI
|
|
+ '&byline=' + showUI
|
|
+ '&portrait=' + showUI
|
|
+ '&autoplay=' + autoplay
|
|
;
|
|
if(settings.color) {
|
|
url += '&color=' + settings.color;
|
|
}
|
|
}
|
|
else if(source == 'youtube') {
|
|
url = ''
|
|
+ 'enablejsapi=' + api
|
|
+ '&autoplay=' + autoplay
|
|
+ '&autohide=' + hideUI
|
|
+ '&hq=' + hd
|
|
+ '&modestbranding=1'
|
|
;
|
|
if(settings.color) {
|
|
url += '&color=' + settings.color;
|
|
}
|
|
}
|
|
return url;
|
|
}
|
|
},
|
|
|
|
/* standard module */
|
|
debug: function(message, variableName) {
|
|
if(settings.debug) {
|
|
if(variableName !== undefined) {
|
|
console.info(settings.moduleName + ': ' + message, variableName);
|
|
}
|
|
else {
|
|
console.info(settings.moduleName + ': ' + message);
|
|
}
|
|
}
|
|
},
|
|
error: function(errorMessage) {
|
|
console.warn(settings.moduleName + ': ' + errorMessage);
|
|
},
|
|
invoke: function(methodName, context, methodArguments) {
|
|
var
|
|
method
|
|
;
|
|
methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
|
|
if(typeof methodName == 'string' && instance !== undefined) {
|
|
methodName = methodName.split('.');
|
|
$.each(methodName, function(index, name) {
|
|
if( $.isPlainObject( instance[name] ) ) {
|
|
instance = instance[name];
|
|
return true;
|
|
}
|
|
else if( $.isFunction( instance[name] ) ) {
|
|
method = instance[name];
|
|
return true;
|
|
}
|
|
module.error(settings.errors.method);
|
|
return false;
|
|
});
|
|
}
|
|
if ( $.isFunction( method ) ) {
|
|
return method.apply(context, methodArguments);
|
|
}
|
|
// return retrieved variable or chain
|
|
return method;
|
|
}
|
|
};
|
|
// check for invoking internal method
|
|
if(methodInvoked) {
|
|
invokedResponse = module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
|
|
}
|
|
// otherwise initialize
|
|
else {
|
|
if(instance) {
|
|
module.destroy();
|
|
}
|
|
module.initialize();
|
|
}
|
|
|
|
})
|
|
;
|
|
// chain or return queried method
|
|
return (invokedResponse !== undefined)
|
|
? invokedResponse
|
|
: this
|
|
;
|
|
};
|
|
|
|
|
|
$.fn.videoPlaylist = function(video, parameters) {
|
|
var
|
|
$allModules = $(this),
|
|
$video = $(video),
|
|
$iframe = $video.find('.embed iframe'),
|
|
|
|
settings = $.extend({}, $.fn.videoPlaylist.settings, parameters, true)
|
|
;
|
|
$allModules
|
|
.each(function() {
|
|
var
|
|
$element = $(this),
|
|
|
|
metadata = settings.metadata,
|
|
namespace = settings.namespace,
|
|
className = settings.className,
|
|
|
|
module = {
|
|
initialize: function() {
|
|
$element
|
|
.on('click.' + namespace , module.changeVideo)
|
|
;
|
|
},
|
|
changeVideo: function() {
|
|
var
|
|
flv = $element.data(metadata.flv) || false,
|
|
source = $element.data(metadata.source) || false,
|
|
placeholder = $element.data(metadata.placeholder) || false
|
|
;
|
|
if(flv && source) {
|
|
$video
|
|
.data(metadata.source, source)
|
|
.data(metadata.flv, flv)
|
|
;
|
|
if(settings.showPlaceholder) {
|
|
$video
|
|
.removeClass(className.active)
|
|
.find($.fn.video.selector.placeholder)
|
|
.attr('src', placeholder)
|
|
;
|
|
}
|
|
else {
|
|
try {
|
|
$video
|
|
.video('play')
|
|
;
|
|
}
|
|
catch(error) {
|
|
console.warn('Video Playlist Module: ' + settings.error.init);
|
|
}
|
|
}
|
|
$allModules
|
|
.removeClass(className.active)
|
|
;
|
|
$element
|
|
.addClass(className.active)
|
|
;
|
|
}
|
|
}
|
|
}
|
|
;
|
|
module.initialize();
|
|
})
|
|
;
|
|
|
|
if(settings.playFirst) {
|
|
$allModules
|
|
.eq(0)
|
|
.trigger('click')
|
|
;
|
|
// we all like a good hack
|
|
if($iframe.size() > 0) {
|
|
$iframe
|
|
.attr('src', $iframe.attr('src').replace('autoplay=1', 'autoplay=0') )
|
|
;
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
$.fn.video.settings = {
|
|
|
|
moduleName : 'Video',
|
|
namespace : 'video',
|
|
debug : false,
|
|
|
|
metadata : {
|
|
source : 'source',
|
|
flv : 'flv'
|
|
},
|
|
|
|
onPlay : function(){},
|
|
onReset : function(){},
|
|
onChange : function(){},
|
|
|
|
// callbacks not coded yet (needs to use jsapi)
|
|
play : function() {},
|
|
pause : function() {},
|
|
stop : function() {},
|
|
|
|
width : 'auto',
|
|
height : 'auto',
|
|
|
|
autoplay : false,
|
|
color : '#442359',
|
|
hd : true,
|
|
showUI : false,
|
|
api : true,
|
|
|
|
errors : {
|
|
method : 'The method you called is not defined'
|
|
},
|
|
|
|
className : {
|
|
active : 'active'
|
|
},
|
|
|
|
selector : {
|
|
embed : '.embed',
|
|
placeholder : '.placeholder',
|
|
playButton : '.play'
|
|
}
|
|
};
|
|
|
|
$.fn.videoPlaylist.settings = {
|
|
moduleName : 'Video Playlist',
|
|
namespace : 'videoPlaylist',
|
|
|
|
source : 'vimeo',
|
|
showPlaceholder : false,
|
|
playFirst : true,
|
|
|
|
metadata: {
|
|
flv : 'flv',
|
|
source : 'source',
|
|
placeholder : 'placeholder'
|
|
},
|
|
|
|
errors: {
|
|
init : 'The video player you specified was not yet initialized'
|
|
},
|
|
|
|
className : {
|
|
active : 'active'
|
|
}
|
|
|
|
};
|
|
|
|
})( jQuery, window , document );
|