Pages:

• Main Page

• IPlayer FLV Player

Categories:

• General
• Research

Recent News:

• VDI 3D Game Featured at the 2010 Olympics
• Canadians Create 3D Application for iPhone
• Virtual Worlds, Virtually Anything is Possible
• A VDI and Vizible Collaboration
• A Visit From Mike Katchabaw
• Let’s Cheer for Web 2.5!
• Web 3.0, Buzzword?
• Serious Games Get Serious
• VDI News

Login/Register:

• Log in
• RSS Feed

Search:

IPlayer is a web-base FLV Player, which was created by Ian Howatson in 2006 for a project done at VDI, it has been modified over the years gaining more functionality. IPlayer was coded originally in Actionscript 1.0, then upgraded to Actionscript 2.0, future versions may look at implementing Actionscript 3.0.

Download IPlayer

Installation

To install IPlayer simply put the IPlayer.swf file into a web directory on your server. Then do the same with the IPlayer.js file, they don’t have to be in the same directory for example one could be in the js directory and the other could be in the flash directory the choice is yours. The rest of the files in the download package are source files and example movies, they are not needed to use IPlayer only if you are interested in modifying it.

Using IPlayer

To get IPlayer working is pretty simple, there are a few steps needed to get it working I will go through them now.

Step 1 (Adding Javascript):

Basically in this step we need to add the IPlayer.js file to the HTML page we want to display our movie on. Let’s assume that our IPlayer.js file is located in a fold on the web root called js and your HTML page is located on the web root. Remember this is an example you may change directory names, and locations to suit your needs. Now simply add this code to your page between the HEAD tags:

That is it for the step 1, now on to step 2.

Step 2 (Calling js function to load the Player)

Here is where we will implement the player on the HTML page, IPlayer uses a simple javascript function to add the flash object, and it also takes a few parameters to configure the player. Here is the code, copy and paste it between the BODY tags of the HTML page.

The function loadplayer has 7 parameters:

1. Player Location: This parameter indicates where IPlayer.swf is located, in this example it is located on the web root, but as stated before it can be located anywhere in your web directories e.g. (/flash, /player, /flash/IPlayer…)
2. Width: The width of the flv file.
3. Height: The height of the flv file.
4. Position: Where IPlayer will be placed on the page, values for this are ‘left’, ‘middle’, ‘right’
5. Background Color: disabled in this version.
6. Movie: The web directory where the movie is located along with the name of the movie. Once again this value is anywhere you want your flvs to be located, and remember that the path must be relative to the HTML page.
7. Buffer: The amount of time the Movie will buffer before being able to start playing. In this version of IPlayer the buffer time is always 10, later version will have control of how much buffer time is used.

Step 3: More Functionality

IPlayer also has the ability to reload itself to play another movie, this is done by calling another javascript function called reloadplayer(). The function reloadplayer() is similar to the loadplayer function with less parameters. Below we will implement reloadplayer() using anchor tags.

Here is a description of the parameters used in reloadplayer:

1. Movie: This is the path to the FLV relative to the HTML page. In the example above a variable was used to represent the path to the movie. You may use a string variable if you want e.g. “movie/move.flv”
2. Buffer: Same as the loadplayer function 10 is the only acceptable number.
3. Width: The width of the flv.
4. Height: The height of the flv.

In Conclusion

That’s it for the walk through, as you can see its pretty easy to implement a simple page with a movie player on it.

The download of IPlayer contains the exact same HTML code used in the above example called example.html, it also includes all the source files as well as 2 flvs for testing purposes.

If there is any other questions please feel free to leave a comment below and I will try and help out to the best of my ability.

-=ian=-