Using jQuery to embed a movie using Flowplayer

Follow these simple steps to embed a movie using Flowplayer (an Open Source video player). There are heaps of customisations that you can make to the player which I will share in seperate posts in more detail – including ipad support, custom controls, RTMP/RTSP live streaming, auto play, clip scaling, player debugging, changing resolution, dynamic video size etc… This post details the minimal setup for the player to get you started.

Related Posts:

• Flowplayer Dynamic Video Size
• Debugging and Catching Errors with Flowplayer

HTML

    


Status Ready.

jQuery

//video or stream address
var streamAddressFull = "http://streamaddress/mp4:filename/playlist.m3u8",
    vidElem = $('#fms'),
    statusElem = $('#video-stream-status .status');

$f('fms', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf",
{
    /** ------- Error Handling -------- **/

    debug: debug,  //output all events triggered by the Flash component to the console

    onError: function(e)
    {
        statusElem.html("Error: (code:"+e+").");
    },

    // we need at least this version of flash
    version: [9, 115],

    // older versions will see a custom message
    onFail: function()
    {
          statusElem.html("You need the latest Flash version to view MP4 movies. " + "Your version is " + this.getVersion());
    },

    onBeforeLoad:function()
    {
        statusElem.html("Loading...");
    },

    /** ------- Clip Configurations -------- **/

    clip:
    {
        url: streamAddressFull,
        scaling: 'fit', //fit, scale, orig, half
        autoPlay: true,
        autoBuffering: true,

        onStart: function(clip)
        {
            statusElem.html("Playing.");
        }
    },

    plugins:
    {
        controls:
        {
            // display properties such as size, location and opacity
            right: 0,
            bottom: 0,
            opacity: 0.95,
            backgroundGradient: 'low', //faded slightly
        }
    },

    /** ------- Look and Feel -------- **/

    canvas:
    {
        backgroundGradient: 'none',
        backgroundColor: '#000000'
    }

});