You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Alternate embedding methods Installation - Demo 5 / 5

flashembed, SWFObject & the OBJECT tag

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:

The only reason not to use flowplayer.js is the file size. For example, SWFObject weighs 9.5 Kb when minified and flowplayer.js weighs 19 Kb. (version 3.1 will weigh only 15Kb). However, when using gzip compression when serving files the download savings are reduced to 3 Kb. But you may be strict about this so let's move on.

flashembed.js 5.5 Kb

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

<!-- include flashembed -->
<script src="http://static.flowplayer.org/js/tools/tools.flashembed-1.0.4.min.js"></script>


<!-- setup 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", "/swf/flowplayer-3.1.5.swf", {config: {
	clip:'http://flowplayer.org/video/flowplayer-700.flv',
	plugins: {
		controlbar:null		
	}
}});
</script>

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

See this example as a standalone page.

SWFObject 9.5 Kb

SWFObject is very common library for inserting Flash in web pages. It is used very much and you may even have it already. Here is an example setup: 

<!-- include SWFObject -->
<script src="swfobject-2.1.js"></script>

<!-- setup container for Flowplayer (must be before following script tag) -->
<div id="player"></div>

<!-- place Flowplayer into container -->
<script language="JavaScript">			
swfobject.embedSWF("/swf/flowplayer-3.1.4-dev.swf", "player", "500", "320", "9.0.0", null, { 
	config: "{'clip': 'http://flowplayer.org/video/flowplayer-700.flv' }}"
	}
); 
</script>

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 quote (').

Here are standalone pages for version 1.5 and version 2.1

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 even if the user does not have JavaScript enabled on their browser. 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. They are both evaluated below.

OBJECT/EMBED combination

This provides the best cross browser compatibility but it requires a lot of work. This method is proposed in this Adobe tech article. 

<!-- OBJECT tag for Internet Explorer 3+ -->
<object id="flowplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="400">
	<param name="movie" value="/swf/flowplayer-3.1.5.swf" /> 
	<param name="flashvars" 
		value='config={"clip":"http://flowplayer.org/video/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="/swf/flowplayer-3.1.5.swf"
		flashvars='config={"clip":"http://flowplayer.org/video/flowplayer-700.flv"}'/>
	
</object>
See this example as a standalone page.

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 compatible. It uses a single OBJECT tag that works on every browser. Here is an example: 

<object id="flowplayer" width="300" height="200" data="/swf/flowplayer-3.1.5.swf" 
	type="application/x-shockwave-flash">
	
	<param name="movie" value="/swf/flowplayer-3.1.5.swf" /> 
	<param name="allowfullscreen" value="true" />
	
	<param name="flashvars" 
		value='config={"clip":"http://blip.tv/file/get/N8inpasadena-Flowers457.flv"}' />
</object>
See this example as a standalone page.

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 tbe 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 of generating the OBJECT code so you don't have to "get your hands dirty".

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: 

<object id="flowplayer" width="800" height="460" data="/swf/flowplayer-3.1.5.swf" 
	type="application/x-shockwave-flash">
	
	<!-- load configuration from config.jsp -->
	<param name="flashvars" value='config=config.js' />
	
	<param name="movie" value="/swf/flowplayer-3.1.5.swf" /> 
	<param name="allowfullscreen" value="true" />	
	
</object>

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

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

See this example as a standalone page.