jqVideo - «jQuery Mashup » video plugin

Download Archive

What is it?

This utility plugin enables flash web video for both modal video popup (lightbox) and inline video. It is based on jQuery 1.3.2 and uses jqModal r.14 and FlowPlayer 3.1.4.

What it does:

This jQuery video plug-in is used to provide ease of use and object instantiation of videos and the use of templating. It allow to deploy less configuration codebase by centralizing the init parameters in a git resetHEAD~1 single object constructor. jqVideo plugin allow to couple jqModal and Flowplayer functionalities. It can also stream over RTSP or HTTP protocols automatically by providing the right file extension ( SMIL or flv, f4v).

Finally, operation optimisation is obtained by minimising and merging script using Ant. Winant installer and instruction can be found at this location. Moreover, the jQuery base library can be imported directly from Google CDN to further improve loading time through browser cache thus limiting bandwidth usage.

What it doesn't:

It doesn't play Youtube based video. For that purpose, use Longtail video jwPlayer instead.

Integration patterns:

1. Modal Video

The videoTrigger class is used to append modal (popup) behaviour to link tags <a></a>. It can also trigger templates and set parameters.

Features:

1. Auto initialisation
2. Templating
3. Play / pause
4. Automatic protocol selection via the video URL
5. Dynamic sizing

Class selector is used for detection and display. For instance, all links with the videoTrigger class are appended the the modal behaviour on page load $('a.videoTrigger').

<a class="videoLink videoTrigger" href="/assets/videoContainer.htm?
    play=false&video=http://url to yourCDN/video.flv.smil&width=640&height=500">
    Text or image link
</a>

The HTML link may points to any specific video container (template) page which will be loaded into the modal. This provides a way to customize its look and feel.

Template URL, play, video URL & protocol, width and height parameters are passed to the modal via the HREF tag for ease of integration.

Video Modal init code:

Modal behaviour and call-back function are set on page load. Nevertheless, in this current version, the init code is included in the library. So, there is no need to include it in the host page.

The parameters are passed to the plug-in function via the jQvideo name space using the setModalParams(href) method. The call-back function doPopPlayer() will retrieve the parameters and set the modal accordingly.

$(document).ready(function () {
    var trigger = $('a.videoTrigger');
    if (trigger) /* Appends popVideo holder and set video triggers */
    {
        $("body").append('<div class='jqmWindow' id='videoPopUp'></div>');

    trigger.click(function (){ // stores href in spacename modal.href
    to set video parameters on callback
        jqVideo.setModalParams($(this).attr('href'));
        return false;
    });

    $('#videoPopUp').jqm({ajax: '@href', trigger: 'a.videoTrigger',
        onLoad: jqVideo.doPopPlayer,
        onHide: function(h) { 
        $('#videoPopUp').html("");
            h.w.hide()
            h.o.remove();
        }
    }); 
    }
});

2. Inline video

Inline video allows setup of one or more video in page.

Features

1. Object inherits all player methods and can be manipulated programmatically. e.g. jqVideo.videoMobileInteractivity1.stop();
2. All defaults parameters can be overridden by passing new properties.
   Available parameters: (Capital letter for custom default values)
   
   * @param {String} Div: could be passed but now uses the object id attribute for shorter syntax
   * @param {String} BackgroundUrl: used to reset BG image when URL passed in instantiation
   * @param {object} Flowplayer clip and plug-in objects can be reset using custom objects: Clip, Plugins.

Multiple videos can be hosted on the same page as long as every one of them is identified by its own ID.

In this pattern, classes are used for display purposes only.

NOTE: <a></a> tag text must be left empty.

<a class="inlineVideoDisplay inlineHDformat" href="http://url to your video.flv" 
    id="videoMobileInteractivity1"></a>
    <a class="inlineVideoDisplay inlineHDformat" href="http://url to your CDN/video.flv.smil" 
    id="videoMobileInteractivity2">
</a>

Inline video init code:

This pattern allows manipulating objects after instantiation which inherits all Flowplayer methods. Refer to : jQvideo.objectName.

$(document).ready(function () { 
    jqVideo.videoMobileInteractivity1 = $("#videoMobileInteractivity1").video(
        {Clip: {    autoPlay: true, autoBuffering: true }    });

    jqVideo.videoMobileInteractivity2 = $("#videoMobileInteractivity2").video(
    {
        Plugins: {
            controls : {progressColor : '#abb400'}
        }, 
    BackgroundUrl : "/jqVideo/assets/images/backgroundImage.jpg"});
});

Inline videos can also be intanciated all together on page load such as for modal video. Nevertheless, both methods should not be used together.

<a class="inlineVideoDisplay inlineHDformat" id="video1" 
    href="http://url to your video.flv?play=true>
< /a>

This link uses a fakeTemplate in order to pass more than one parameters within url.

<a class="inlineVideoDisplay" id="video2"
    href="http:/fakeTemplate?video=/url to your video.flv.smil&amp;width=460&amp;height=308&      
    background=assets/images/backgroundImage.jpg">
</a>

Init code will then be part of the library instead of inline. This will simpify video integration and centralize init code.

    $(document).ready(function () {
        $('a.inlineVideoDisplay').each(function(){
            var v = $(this);
            var p = jQvideo.getHashValue(v.attr('href'));
            var playSate = p.play == 'true' ? true : false;
            var background = typeof p.background === 'string' ? p.background : "";

            if (typeof(p.video) == 'string') {
                v.attr( 'href', p.video );
                v.css('width', p.width + 'px'); 
                v.css('height', p.height + 'px');
            }
            $("#" + v.attr('id')).video({ clip: { autoPlay: playState}, backgroundUrl : background });
        });
    });