Flash Media Player

From DreamHost

[edit] Introduction

DreamHost has licensed Jeroen Wijering's excellent Flash Media Player. This tool enables all DreamHost customers to embed streamed audio and video into any of their web pages! The current version installed at DreamHost is 3.1. The most recent version can be found at the author's site. Installing it on your site is very easy.

The Flash Media Player supports playback of a single media file of any format the Adobe Flash Player can handle (MP3,FLV,SWF,JPG,PNG or GIF). It also supports RSS/XSPF playlist (with mixed mediatypes), a wide range of flashvars (settings) for tweaking both behavior and appearance and an extensive, documented javascript/actionscript API.

[edit] Preparing Your Video

The Flash Media Player can only play videos in "FLV" format... but never fear, it's super-easy to convert your .AVI, .MOV, or .MPG into a .FLV via our web panel's Goodies > Flash Media area!

Simply upload your original video to somewhere on your webspace, then go to the panel and submit the simple form. You'll receive an email with the exact HTML code you need to play the video within a few minutes when the re-encoding process is complete!

The Dreamhost Flash Video Converter will have saved a copy of your video in .FLV format in the same directory as your original, with a similar filename. After the encoding is complete, you may delete the original video from your webspace.

[edit] Usage

You'll just need to paste a small piece of code into your HTML to embed the player:

<script type="text/javascript" src="https://media.dreamhost.com/ufo.js"></script>
<p id="sample.flv"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
 
<script type="text/javascript">
  var FO = { movie:"https://media.dreamhost.com/mediaplayer.swf",width:"320",height:"240",majorversion:"7",build:"0",bgcolor:"#FFFFFF",
             flashvars:"file=https://media.dreamhost.com/sample.flv&showdigits=true&autostart=false" };
UFO.create(FO,"sample.flv");
</script>

You'll need to change a few things in the code above. Or use the code snippet that is emailed to you upon successful conversion of the file.

1. Set the height and width to a size that you'd like
2. Change the https://media.dreamhost.com/sample.flv to match the URL of your filename
3. Change the other instances of sample.flv to match your file name.

Remember the file doesn't have to be a video file!

[edit] Using the Flash Media Player more than once on the same page

If you just copy and paste the above code twice for two different movies, the above code will not work on your page--only one video will display. To make it work, just make sure to only have the first line appear once in your page. Below is an example of a page with two videos:

Include this snippet on the page once.

<script type="text/javascript" src="swfobject.js"></script>

Place these HTML tags where you want the movies to appear. Note the use of a unique id in the div tag.

<div id="foo"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>

<div id="bar"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>

Place this script in a convenient place. Match the ID passed to the "write" method to the corresponding ID in your HTML code.

<script type="text/javascript">
var sd = new SWFObject('https://media.dreamhost.com/mediaplayer.swf','mpl','320','240','8');
sd.addParam('allowscriptaccess','always');
sd.addParam('allowfullscreen','true');
sd.addVariable('height','240');
sd.addVariable('width','320');
sd.addVariable('file','movie1.flv');
sd.write('foo');
</script>

<script type="text/javascript">
var sd = new SWFObject('https://media.dreamhost.com/mediaplayer.swf','mpl','320','240','8');
sd.addParam('allowscriptaccess','always');
sd.addParam('allowfullscreen','true');
sd.addVariable('height','240');
sd.addVariable('width','320');
sd.addVariable('file','movie2.flv');
sd.write('bar');
</script>

[edit] Flashvars

Flashvars are configuration options you can insert into your HTML code to control both behavior and appearance of the player.

Because Flashvars are so numerous and often change from version to version, we refer you to the author's documentation for their use.

N.B. DreamHost's media tools shows Flashvars to be cited as

flashvar1=value&flashvar2=value

e.g.

file=https://media.dreamhost.com/sample.flv&showdigits=true&autostart=false

While only an ampersand (&) is necessary:

file=https://media.dreamhost.com/sample.flv&showdigits=true&autostart=false

[edit] Flashvars

Flashvars are configuration options you can insert into your HTML code to control both behavior and appearance of the player.

Because Flashvars are so numerous and often change from version to version, we refer you to the author's documentation for their use.

N.B. DreamHost's media tools shows Flashvars to be cited as

flashvar1=value&flashvar2=value

e.g.

file=https://media.dreamhost.com/sample.flv&showdigits=true&autostart=false

While only an ampersand (&) is necessary:

file=https://media.dreamhost.com/sample.flv&showdigits=true&autostart=false

[edit] Playlists

A playlist is a great way to have multiple videos on one page within one player instead of multiple players.

Getting a playlist to work correctly can be a little bit tricky, but not impossible. It requires a few changes to the code which is emailed to you upon your video being successfully converted.

The changes to the code which is emailed can be seen below. There are four major changes to this code.

1. <p id="flashVideo"> has been modified from the video file name to something a bit more generic. This name really only matters for the next step
2. UFO.create(FO,"flashVideo"); has been modified to be the same as the id which was set in the previous step. If these do not match, then your video will not show correctly.
3. The file has been changed from the path to where the converted file is to the playlist.xml file. You can use the full path as well, but in this example the playlist.xml (for more information on this file, see below) file is in the same directory as this HTML.
4. To get the playlist to show up correctly, you need to change the displayheight flashvar parameter. This is not in the code which is emailed and needs to be added. This is the display height of the video, not the entire player. The playlist is part of the player, so you will probably want to modify the height parameter to be larger and the displayheight parameter to be what the height parameter originally was.

<script type="text/javascript" src="https://media.dreamhost.com/ufo.js"></script>
<p id="flashVideo"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
   var FO = { movie:"https://media.dreamhost.com/mediaplayer.swf",width:"320",
              height:"440",majorversion:"7",build:"0",bgcolor:"#FFFFFF",
              flashvars:"file=playlist.xml&displayheight=240&showdigits=true" };
UFO.create(FO,"flashVideo");
</script>

You will also have to make one of two changes to get the player to operate correctly.

1. You can download and copy mediaplayer.swf to your own site! Then, update the HTML code to just have "mediaplayer.swf" where you used to have "https://media.dreamhost.com/mediaplayer.swf".
2. You can make a new file in the domain/subdomain's root folder called crossdomain.xml with the following contents:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="media.dreamhost.com" />
</cross-domain-policy>

[edit] playlist.xml

You will need to create a playlist.xml file (or whatever you would like to call it) to get your playlist working correctly. To get started you can copy the example file from http://media.dreamhost.com/playlist.xml. You will want to modify this file with the information about your videos. The major thing which you will have to change is the <location>. This should be set to the path to your converted video file which was emailed to you. The <title> is what will show up in your playlist along with the <creator>.

[edit] Standards Validation Issues