Flowplayer Minimal Setup

1. Include flowplayer.js on your page

Flowplayer uses its own JavaScript file flowplayer-3.2.10.js to install the player on the page and this file must be included on your page with following HTML one-liner:

<script src="path/to/the/flowplayer.min.js"></script>

This script has a lot of features other than the ability to perform installation. It provides you a flexible JavaScript API that you can see functioning on other demos but here we stick to the installation part only.

Double check that you have given the path to the file correctly. This is a very common source of errors. If your page fires a JavaScript error saying something like TypeError: flowplayer is undefined your path is probably wrong. The path can be absolute (starting with http://) or a relative in which case the path is calculated from the location where your page is. The best way to make sure about the path is to access the file directly with your browser.

Note that many of our demos access the script from http://releases.flowplayer.org/js/flowplayer-3.2.10.min.js. Your pages should not do that! One day we may want to move the location of the file or our server may not respond. In that case your pages won't work either. Always access the file from your own servers.

2. Set up the player container

The next step is to place a HTML element on your page that will contain the video player. You can place this element anywhere on your page and this element can be any HTML tag you can find from your pocket. The most commonly used tags are anchor (A) and DIV. In this demo we are using A tag as follows:

<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
    style="display:block;width:425px;height:300px;"
    id="player">
</a>

Some important things to notice here:

• The video file being played is given in href attribute.
• The player dimensions are defined with style attribute. You can also define these dimension in an external stylesheet. A tag requires block CSS attribute to be defined or otherwise your video will be not shown in full dimensions.
• The id attribute works as a reference so we can install the player inside this particular tag on our next step.

Most of our demos use A tag as the container. There is a good reason for this. By using the A tag, the video may work even on clients that do not support JavaScript. When the href attribute points to the video file, the browser attempts to do the default behavior of the tag. On many clients the video file is being played with a player that is provided with the operating system. This kind of page design is very popular these days and has names such as "graceful degradation", "unobtrusive JavaScript" or "progressive enhancement".

3. Install Flowplayer

On our third and final step we will install the player inside our container. It happens with following simple JavaScript call on your HTML page.

<script language="JavaScript">
flowplayer("player", "path/to/the/flowplayer.swf");
</script>

Some important things to notice here:

• flowplayer is a JavaScript function. It is called with two arguments: "player" and "flowplayer-3.2.11.swf".
• The first argument "player" references our player container. This must have the same value as the id attribute we supplied for the container (A tag).
• The second argument is a path to the Flowplayer Flash component which is the actual video player. Again you must make sure that the path is given correctly and you should check that by requesting the file with your browser.
• The flowplayer call must be placed after the player container. Alternatively you can use your favorite JavaScript library to make the call after the document is loaded and scriptable. For example in jQuery this is $(document).ready().

A fully functional standalone demo of this example is shipped with each Flowplayer distribution available at our download section.

More Information

If you are looking for a similar information about the commercial version:

• Installing the Flowplayer commercial version

If you are new to HTML and/or CSS, the following tutorials provide a good overview of those technologies:

• HTML Tutorial for beginners
• CSS Tutorial for beginners

The following links will allow you to dig deeper into the workings of Flowplayer:

• Flowplayer JavaScript API
• Flowplayer Source Code