This is a message.

Alternate embedding methods

flashembed, SWFObject & the OBJECT tag

There are situations where you may not want to use flowplayer.js. Flowplayer has alternatives.

It is possible to embed Flowplayer in your page without the flowplayer.js JavaScript file. After all, Flowplayer is just a normal Flash object. However, you will lose the benefits of the Flowplayer API including:

One reason not to use flowplayer.js is the file size. For example, SWFObject weights 9.5 Kb when minified and flowplayer.js weights 15 Kb. However, using gzip compression when serving files the savings in size is reduced to 3 Kb. But you may be strict about this. The other reason is that some sites like MySpace don't allow JavaScript when embedding Flash in them and when you want to use Flowplayer in these you need to use the object and embed tag alternatives described below.

Flashembed 5.5 Kb

The flashembed script is the ultimate Flash embedding tool developed by Tero Piirainen from the Flowplayer team. Internally flowplayer.js uses this script. The installation with this script is quite straightforward. Here is an example:

<!DOCTYPE html>
<html>
 
<head>
    <!-- include flashembed -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://releases.flowplayer.org/js/flowplayer-3.2.10.min.js"></script>
</head>
 
<body>
 
<!-- set up container for the player -->
<a id="player" style="width:500px;height:320px;display:block"></a>
 
<!-- third argument is flowplayer configuration. you cannot use events -->
<script language="JavaScript">
flashembed("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
    config: {
        clip: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv',
        plugins: {
            controls: null
        }
    }
});
</script>

HTML
standalone demo

The easy part here is the configuration. Its almost similar to the Flowplayer configuration except that JavaScript events are not supported. In the flashembed demo area there is an important demo about the role of flashembed in Flowplayer.

SWFObject 9.5Kb

SWFObject is a very common library for inserting Flash in web pages. Here is an example setup:

<!DOCTYPE html>
<html>
<head>
<!-- include SWFObject -->
<script src="swfobject-2.1.js"></script>
</head>
<body>
<!-- set up container for Flowplayer (must be before following script tag) -->
<div id="player"></div>
 
<!-- place Flowplayer into container -->
<script language="JavaScript">
swfobject.embedSWF("http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",
    "player", "500", "320", "9.0.0", null, {config:
    "{'clip': 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv' }}"
    }
);
</script>
</body>
</html>

HTML
standalone demo

The configuration becomes more tricky here. The Flowplayer configuration is supplied in a variable named config and the value must be a string. Inside this value you have to be careful about using quotes. Both the keys and values must be quoted with single quotes (').

OBJECT and EMBED tags 0 Kb

The following embedding methods do not need JavaScript at all so there is no need to load any external JavaScript libraries on your page. The benefit of this method is of course a reduced download amount and the player will work on sites that don't allow or use JavaScript. But there are the following drawbacks:

  1. Old Flash versions cannot be handled properly.
  2. HTML syntax is complicated and hard to debug. You have to be extra careful with the flashvars parameter because Flowplayer uses JSON syntax in the configuration with a lot of nested quotes.

There are two alternative methods for HTML-based embedding. One uses the OBJECT and EMBED tags together and another uses a single OBJECT. These are both explained below:

OBJECT/EMBED combination

This provides the best cross browser compatibility but is verbose. This method is proposed in this Adobe tech article.

<!DOCTYPE html>
<html>
 
<body>
<!-- OBJECT tag for Internet Explorer 3+ -->
<object id="flowplayer"
    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="400">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf" />
    <param name="flashvars"
    value='config={"clip":"http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"}'/>
 

    <!-- EMBED tag for Netscape Navigator 2.0+ and Mozilla compatible browsers -->
    <embed type="application/x-shockwave-flash" width="500" height="320"
    src="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf"
    flashvars='config={"clip":"http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"}'/>
 
</object>
</body>
</html>

HTML
standalone demo

The id attribute in the object tag is needed for this to work on IE 8.

Pure OBJECT tag

This method is the simplest and is standards compliant. It uses a single OBJECT tag that works in every browser. Here is an example:

<!DOCTYPE html>
<html>
<body>
    <object id="flowplayer" width="300" height="200" 
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf"
        type="application/x-shockwave-flash">
 
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf" />
        <param name="allowfullscreen" value="true" />
 
        <param name="flashvars"
            value='config={"clip":"http://stream.flowplayer.org/N8inpasadena-Flowers457.flv"}' />
    </object>
</body>
</html>

HTML
standalone demo

The id attribute in the object tag is needed for this to work on IE 8. This method may seem like a perfect solution which it almost is. You can find detailed information about this method in the flashembed documentation.

TIP: if you want to provide complex configurations for the OBJECT/EMBED tags, you shouldn't bother making them manually. You'll almost certainly become frustrated. The trick is to use our embedding plugin for that. Just configure Flowplayer any way you like and let the embed plugin do the hard work.

External configuration file

Since version 3.1.1 it is possible to load the configuration from an external file. If your videos have been embedded in external sites you can centrally control them by modifying a single configuration file. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"></head>
<body>
<object id="flowplayer" width="800" height="460"
    data="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf"
    type="application/x-shockwave-flash">
 
    <!-- load configuration from config.js -->
    <param name="flashvars" value='config=config.js' />
 
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf" />
    <param name="allowfullscreen" value="true" />
 
</object>
</body>
</html>

HTML
standalone demo

The configuration file is simply given as value for the config property. The above configuration reads this configuration file where we have defined settings for RTMP streaming and the control-bar appearance.

It's important to note that this external configuration does not support events. Also note that the configuration property names must be quoted.