Computational Methods for Research in Speech Science

How to play video from a web page using Flash

This page provides a tutorial for the use of the free FlowPlayer Video Player to replay video from a web page.

1. Prepare your video file

To replay video over the web it is strongly recommended that you first convert the format from its original source format to "Flash Video", or FLV format. Commercial video processing tools are available for this (for example Pinnacle Studio 14 HD (PC DVD), but there also free tools if you are feeling adventurous.

The free FFMPEG program can be used to decode and recode video. This is a command-line tool, although some graphical user interfaces are available. If you use the command-line tool, the following command will compress an existing AVI file to Flash Video:

    ffmpeg -y -i input.avi -ar 22050 -acodec libmp3lame -ab 128k -f flv output.flv

2. Get the FlowPlayer Flash and JavaScript files

The latest version of the standalone player files can be downloaded from FlowPlayer Download. We will be using the free GPL version of the player.

Copy the files flowplayer-3.2.4.min.js, flowplayer-3.2.5.swf and flowplayer.controls-3.2.3.swf to your web folder.

3. Include the JavaScript file

Put code like this in the header of your web page:

    <script type="text/javascript" src="flowplayer-3.2.4.min.js"></script>

4. Embed the flash object in your code

First create a placeholder for where the player is going to be embedded. An <a> anchor tag is quite a good choice, since we can use the href and style attributes to set the video filename and the size of the player.

    <a id="player001" href="videofile.flv"
       style="display:block;width:450px;height:200px">
      Player goes here!
    </a>

Then enter this script to replace the placeholder with the flash player:

    <script type="text/javascript">
      flowplayer("player001", "flowplayer-3.2.5.swf",{
        clip:  {
          autoPlay: false,
          autoBuffering: true
        }
      });
    </script>

The ID for the <a> should match the ID used in the flowplayer() function call. If you have more than one player, repeat this code but with unique IDs for each player instance.

5. The player is displayed when the page is viewed

This player has no controls:

This player has standard controls:

Also see the page How to play sound from a web page using Flash.

Back to Computational Methods Home