Flowplayer Installation A step-by-step guide to showing videos in your web pages
Some details
When you have Flowplayer working in its basic installation, you will quickly want to do more or may want to understand why this simple installation works. Here follows a short explanation
- flowplayer-3.1.5.swf
This is the actual player that gets loaded in your web pages. This Flowplayer player in turn depends on an Adobe Flash object. Most people already have this piece of technology installed on their computer; if it is not, then Flowplayer will ask the user to download and install Adobe Flash from the Adobe web site.
- flowplayer-3.1.4.min.js
This JavaScript file holds a script that manages the Flowplayer from the web page. For those who want to do advanced interactions and control all of Flowplayer's behavior, this file is described in detail in the api. For now it is only important to know it must be included in the HEAD section of the web page so the api is available in the web page.
- The A tag
Actually Flowplayer can be installed on any tag, typically a <DIV> tag or an <A> tag. The A tag has the advantage that you can place normal links in your web pages. The important thing is that the tag has an id="player" attribute (the name "player" can be changed to anything you want). This id is later used by Flowplayer to get the url from the href attribute, load the player on the tag and start the video.
Note also the styling attributes on the tag: these are necessary to tell Flowplayer the dimensions to use for the player. Without these styling attributes, the Player will show full screen, partial only or will not restore properly when returning to the page.
- The call to flowplayer()
The flowplayer() function is provided in the JavaScript file you included. In the minimal installation example, the call is placed after the A tag. The reason is that at that point the id of the A tag is known. A nicer way to do that is to place the call inside a <SCRIPT> tag in the HEAD of the page, the place where all JavaScript should go. However, when placing the call there, then the id of the A tag is not known yet and the call will fail. To solve that you must call flowplayer only after the page has loaded, for example:
<script language="JavaScript"> function myOnload() { flowplayer("player", "path/to/the/flowplayer-3.1.5.swf"); } </script> ... </head> <body onload="myOnload()"> ...
What is next?
If you have installed Flowplayer and it is working, you may want to do more advanced things. Then there are the following topics for you to study:
- Configuration: All aspects of Flowplayer can be customized to your liking. The key to that is the configuration. In the examples on this page the configuration is not used; the default behavior is just fine. But you can provide a third argument to the flowplayer() function that can contain a lot of information to tell Flowplayer how to behave. With the configuration you can change the background color, have a different control bar, place a clock on the screen, have a splash image displayed, load playlists, have overlays and many more options. See the section on configuration for that and see the demos.
- JavaScript API: With the configuration you can customize Flowplayer to your liking, but that is static, that is, you cannot change it after the player has been loaded. If you want to control the behavior of Flowplayer after it has been loaded, you must use the functions of the JavaScript API. For example, in interactive learning you can tell the video to pause at a specific point and launch a question page or information page. The use of the API by end users (you) is simple in nature and you only require a basic JavaScript knowledge. See the API documentation.