Using jQuery to embed a movie using Flowplayer
Share
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:
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'
}
});