Fully documented minimal installation Installation - Demo 1 / 5
Introduction
This is the most important Flowplayer demo. It describes the basics things about Flowplayer and how it's installed. It is recommended that you read the official installation document first but if you already have a video file and a web server and want to get going please continue. Here is our goal: a minimal Flowplayer setup.
This demo assumes that you have some basic knowledge of HTML and CSS. Not much but just the idea and purpose of these techniques. If you are totally lost with these technologies look at the bottom of this page for usefull links.
Now let's get to work. Here are the steps for making a minimal video- enablded HTML page.
1. Include flowplayer.js on your page
Flowplayer uses it's own JavaScript file flowplayer-3.2.4.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-3.2.4.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 propably 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 many of our demos access the script from http://static.flowplayer.org/js/flowplayer-3.2.4.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. Setup 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://vod01.netdna.com/vod/demo.flowplayer/flowplayer-960.mp4"
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- attribue.
- 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.
- 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 behaviour 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-3.2.4.swf");
</script>Some important things to notice here:
- flowplayer is a JavaScript function. It is called with two arguments: "player" and "http://releases.flowplayer.org/swf/flowplayer-3.2.4.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 favourite JavaScript library to make the call after the document is loaded and scriptable. For example in jQuery this is $(document).ready().
Now you can take a look at our working example from this standalone demo. This is the same example that can be found from our downloadables.