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.13.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.18.swf", {
config: {
clip: 'http://stream.flowplayer.org/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.18.swf",
"player", "500", "320", "9.0.0", null, {config:
"{'clip': 'http://stream.flowplayer.org/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 0 Kb

The following embedding method does not require 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.

Important: Some versions of Internet Explorer 9 throw an error when encountering a Flash object in IE9 mode directly in the page source - as opposed to the object being generated by a script, for instance by the Flowplayer API. You can avoid this by adding the following as first meta tag in the HEAD section of your page:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

HTML

Or you can achieve the above more globally on the server side. For instance with an Apache server you can put the following in a .htaccess file:

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support

ApacheConf

There various ways to embed a Flash OBJECT directly. We recommend the most simple, straightforward and reliable one.

Pure OBJECT tag

This method is the simplest and is standards compliant. It uses a single OBJECT tag that works in every browser. No need to load any external JavaScript library. Here is an example:

<!DOCTYPE html>
<html>
<body>
<object id="flowplayer" width="300" height="200"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf"
type="application/x-shockwave-flash">
 
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.18.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.

TIP: If you want to provide complex configurations for OBJECT 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.

This method is a simplified but safe and working variant of the method recommended by Adobe which only adds a link for downloading the Flash plugin. By contrast our reduced proposal has the advantage that a VIDEO tag can be appended to the the OBJECT tag. Then your video can be viewed even on devices which do not support Flash at all, like iOS. Again you can easily try this in practice by simulating your setup with the API and adding the sharing plugin with one or more fallbackUrls in its embed configuration: Afterwards you can simply copy the embed code presented after a click on the embed widget.

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.18.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.18.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.

Important:

  • For XSS security reasons the external configuration file must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.
  • As opposed to the external API configuration this external configuration does not support events. Also note that the configuration property names must be quoted.