As Flash video is omnipresent on the web nowadays, we will use it as an example.
A jQuery Mashup is a means for managing the use of two or more plugins all together. For instance, our demonstration is using Flowplayer and jqModal in order to control the instantiation of inline and modal video while optimizing our page by minimizing Javascript and HTML page code footprint.
This strategy is also very helpful for maintenance purposes as it allows centralized code and eases integration.
For example, our video links specify a target template and the specifics parameters to override the video plugin defaults. Finally, some design issues such as width and height can also be addressed via CSS. So it is better to use width and height parametrization for custom sizing and CSS for standard rules.
As for jqModal, it requires a page to host the video. This requirement has been tweaked into a feature since it allow to either point to a specific page or custom template.
a class="videoTrigger" href="assets/videoContainer or specific template with content.htm?play=true&video=http://myVideo.flv.smil&width=520&height=310"
Sets up an inline video with autoplay:
a class="inlineVideoDisplay inlineHDformat" href="http://myVideo.flv.smil?play=true" id="myVideoID"
Orchestration
Setup methods are gathered into a namespace. They allow to arrange the proper video pattern and to pass specified HREF values to the Flowplayer video plugin and jqModal.
if (typeof jqVideo === 'undefined' || !jqVideo) {
jqVideo = {};
}
Methods are declared this way :
jqVideo.myFunction = function (params) {}.Aside our namespace is the a Flowplayer video instantiation plugin code using A Plugin Development Pattern. It allows to define and override Flowplayer default parameters while limiting video instantiation code footprint.
(function($) {
$.fn.video = function(options) {
var defaults = {
Code...
};
};
})(jQuery);
jqModal trigger code is added to the DOM on init and values are passed via a parameter object to assure proper plugins communication. As mentioned earlier, values are passed via the jqVideo.modal namespace.
jqVideo.setModalParams = function(str)
{
var params = jqVideo.getHashValue(str);
jqVideo.modal = { play: params.play,
video: params.video,
width: params.width,
height: params.height }; return false; }
Finally, in order to enhance our code furthermore, we are using another nice feature provided by jQuery to init our UI component with the document.ready(); function.
This method can be used from within our a library to automatically init our components without having to add any inline Javascript code.
To implement this functionality one need to use a specific trigger class which will differentiate the desired component type. For instance, in our video library model and inline video are differentiated using a specific class such as .inlineVideoDisplay or .videoTrigger.
$(document).ready(function () {
var trigger = $('a.videoTrigger');
if (trigger.length > 0)
{
code...
}
$('a.inlineVideoDisplay').each(function(){
code...
});
});
Some more information is available at this location.
Please write your questions and comments.
