Flash Media Player

This media player plays flv, mp3, jpg, gif, png, and swf files using either an XML playlist or by directly inputting the file using a GET parameter. It is written in Actionscript 3 using Flash CS3. The full player is under 20K bytes.

The control panel can either fade away after 2 seconds of no mouse movement or can be docked and have the content adjusted for its size. There is a play/pause button with alternating graphics. A volume slider adjusts the volume on mouse click or drag. A fullscreen button alternates the video between normal size and fullscreen mode. The previous and next track buttons change the current track. When the user mouse overs the PL button, the playlist is shown at half opacity. When the PL button is pressed, the opacity is set to full. A timer shows the current progress of the current file, as well as its length. The progress bar can be pressed at any position, or the slider can be clicked and dragged to a desired position.

The playlist slider shows a graphic, title, and artist for each file in the playlist. If no graphic is selected, a default graphic will be used for each type of file. The slider moves according to the mouse x position. Each block is highlighted when the user mouse overs it.

When an mp3 file is selected, the image is displayed in the top left corner, the artist and title are displayed in the top right quadrant (left aligned), and a visualizer is displayed in the bottom half. When an flv, jpg, gif, png, or swf file is selected, the file is scaled to fit the media player without distorting its aspect ratio.

Example code for the player:
<object data="52-mediaplayercs3.swf?playmedia=52-playlist.xml&autoplay=false&dockcontrols=false&panelcolor=000000"
type="application/x-shockwave-flash" width="480" height="360" >
<param name="movie" value="52-mediaplayercs3.swf?playmedia=52-playlist.xml&autoplay=false&dockcontrols=false&panelcolor=000000" />
<param name="allowFullScreen" value="true"/>
</object>

The xml playlist format follows the XSPF standard. Example:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <creator>The Beatles</creator>
      <title>Strawberry Fields</title>
      <location>http://www.beatles.com/strawberryfields.mp3</location>
    </track>
    <track>
      <creator>Leonardo DaVinci</creator>
      <title>Mona Lisa</title>
      <location>http://www.fancymuseum.com/monalisa.jpg</location>
      <duration>10000</duration>
    </track>
    <track>
      <creator>John Bezanis</creator>
      <title>Growing Tree</title>
      <location>http://www.bezzmedia.com/growingtree.swf</location>
      <duration>2000000</duration>
    </track>
  </trackList>
</playlist>

When adding an image or swf file to the playlist, duration can be specified. Duration is measured in milliseconds (1000 milliseconds=1 second). If no duration is specified, the duration defaults to 5 seconds.

There are five variables that can be changed. Each variable has to be changed in both locations in the code. The blue one is the location of the media player on your server. playmedia refers to the file that will be played (xml playlist, mp3, flv, jpg, png, or gif). autoplay refers to whether or not the player will automatically start playback. dockcontrols specifies whether the control panel fades away after 2 seconds of no movement, or if it remains visible and content is scaled so it does not reach below the control panel y position. panelcolor changes the tint of the control panel. It is an RGB hex number. The height and width of the player can be changed as well. In this example, the width is set to 480 and the height is set to 360.

Example XML playlist:
Download Example XML Playlist

The media player is available as a built SWF or the source FLA:

Download Source File
Download Built Media Player