/* ****************************** 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 = '' + '' ; } else if(source == 'youtube') { html = '' + '' ; } 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 );