Skip to main content

Using jQuery to embed a movie using Flowplayer

By Sam Deering



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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:



Status Ready.


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

$f('fms', "",
    /** ------- 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());


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

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

        onStart: function(clip)

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

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

        backgroundGradient: 'none',
        backgroundColor: '#000000'


Related Articles

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript

A practical guide to leading radical innovation and growth.

Integromat Tower Ad