JavaScript
Article

Using jQuery to embed a movie using Flowplayer

By Sam Deering

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:

scaling-fit

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'
    }

});

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.