Flash Media Player

From DreamHost
Jump to: navigation, search

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 number installed at DreamHost is shown at https://media.dreamhost.com/ (right-click the player for the full version string). The most recent version can be found at the author's site and 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.

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.

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!

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="https://media.dreamhost.com/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 somewhere below the DIV tags. 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>

Flash Players in MediaWiki

There is a handy extension for Mediawiki, the software that runs Wikipedia, called "DHFlashplayer" which will load the Dreamhost's flash player for you. With custom Wiki tags, <dhflashplayer>...</dhflashplayer> in your wiki mark-up, you can specify the flash file, size, height and other variables and it will use the Dreamhost licensed flash player.

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&amp;flashvar2=value

e.g.

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

While only an ampersand (&) is necessary:

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

The '&amp;' is necessary for valid XHTML but is not explicitly required for HTML.


It should be noted that for W3C valid code, each flashvar must be individually specified. The example below demonstrates the W3C valid method of the above example.

flashvar:"file=https://media.dreamhost.com/sample.flv",flashvar:"showdigits=true",flashvar:"autostart=false"

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. <span 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>
<span 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>

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>.

MP4 files

The Flash Media Player supports streaming of MP4 files. However you may notice that when loading the file the entire file downloads before it can start playing. The reason for this is that MP4 files sometimes have an index header (moov) at the END of the file instead of the start. There are utilities online to modify the file and move the position of the header from the end to the beginning. Then the file will stream without having to download first.

Standards Validation Issues

If you name the *.flv file beginning with a number it will cause your page to not validate. Also, the "Get Flash Player" link is a permanent redirect, so to fully validate all links replace "http://www.macromedia.com/go/getflashplayer" with "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"

PHP pseudo streaming

You can use xmoov.php to stream your flv videos. The following works on Dreamhost. You need to point your player to the PHP file as shown in the two examples below:

<?
    /*
    
        xmoov-php 0.9
        Development version 0.9.3 beta
        
        by: Eric Lorenzo Benjamin jr. webmaster (AT) xmoov (DOT) com
        originally inspired by Stefan Richter at flashcomguru.com
        bandwidth limiting by Terry streamingflvcom (AT) dedicatedmanagers (DOT) com
        
        This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.
        For more information, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
        For the full license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode 
        or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.
        
        
    */


    


    
    //    SCRIPT CONFIGURATION
    
    //------------------------------------------------------------------------------------------
    //    MEDIA PATH
    //
    //    you can configure these settings to point to video files outside the public html folder.
    //------------------------------------------------------------------------------------------
    
    // points to server root
    define('XMOOV_PATH_ROOT', './');
    
    // points to the folder containing the video files. This works if your video files are in the same directory as xmoov.php
    define('XMOOV_PATH_FILES', './');
    
    
    
    //------------------------------------------------------------------------------------------
    //    SCRIPT BEHAVIOR
    //------------------------------------------------------------------------------------------
    
    //set to TRUE to use bandwidth limiting.
    define('XMOOV_CONF_LIMIT_BANDWIDTH', TRUE);
    
    //set to FALSE to prohibit caching of video files.
    define('XMOOV_CONF_ALLOW_FILE_CACHE', FALSE);
    
    
    
    //------------------------------------------------------------------------------------------
    //    BANDWIDTH SETTINGS
    //
    //    these settings are only needed when using bandwidth limiting.
    //    
    //    bandwidth is limited my sending a limited amount of video data(XMOOV_BW_PACKET_SIZE),
    //    in specified time intervals(XMOOV_BW_PACKET_INTERVAL). 
    //    avoid time intervals over 1.5 seconds for best results.
    //    
    //    you can also control bandwidth limiting via http command using your video player.
    //    the function getBandwidthLimit($part) holds three preconfigured presets(low, mid, high),
    //    which can be changed to meet your needs
    //------------------------------------------------------------------------------------------    
    
    //set how many kilobytes will be sent per time interval
    define('XMOOV_BW_PACKET_SIZE', 40);
    
    //set the time interval in which data packets will be sent in seconds.
    define('XMOOV_BW_PACKET_INTERVAL', 1);
    
    //set to TRUE to control bandwidth externally via http.
    define('XMOOV_CONF_ALLOW_DYNAMIC_BANDWIDTH', FALSE);
    
    
    
    //------------------------------------------------------------------------------------------
    //    DYNAMIC BANDWIDTH CONTROL
    //------------------------------------------------------------------------------------------
    
    function getBandwidthLimit($part)
    {
        switch($part)
        {
            case 'interval' :
                switch($_GET[XMOOV_GET_BANDWIDTH])
                {
                    case 'low' :
                        return 0.5;
                    break;
                    case 'mid' :
                        return 0.5;
                    break;
                    case 'high' :
                        return 0.2;
                    break;
                    case 'off' :
                        return 0;
                    break;
                    default :
                        return XMOOV_BW_PACKET_INTERVAL;
                    break;
                }
            break;
            case 'size' :
                switch($_GET[XMOOV_GET_BANDWIDTH])
                {
                    case 'low' :
                        return 20;
                    break;
                    case 'mid' :
                        return 40;
                    break;
                    case 'high' :
                        return 90;
                    break;
                    default :
                        return XMOOV_BW_PACKET_SIZE;
                    break;
                }
            break;
        }
    }
    
    
    
    //------------------------------------------------------------------------------------------
    //    INCOMING GET VARIABLES CONFIGURATION
    //    
    //    use these settings to configure how video files, seek position and bandwidth settings are accessed by your player
    //------------------------------------------------------------------------------------------
    
    define('XMOOV_GET_FILE', 'file');
    define('XMOOV_GET_POSITION', 'start');
    define('XMOOV_GET_AUTHENTICATION', 'token');
    define('XMOOV_GET_BANDWIDTH', 'bw');
    
    
    
    //    END SCRIPT CONFIGURATION - do not change anything beyond this point if you do not know what you are doing
    
    
    
    //------------------------------------------------------------------------------------------
    //    PROCESS FILE REQUEST
    //------------------------------------------------------------------------------------------
    
    if(isset($_GET[XMOOV_GET_FILE]) && isset($_GET[XMOOV_GET_POSITION]))
    {
        //    PROCESS VARIABLES
        
        # get seek position
        $seekPos = intval($_GET[XMOOV_GET_POSITION]);
        # get file name
        $fileName = htmlspecialchars($_GET[XMOOV_GET_FILE]);
        # assemble file path
        $file = XMOOV_PATH_ROOT . XMOOV_PATH_FILES . $fileName;

# Uncomment here and below if you want the first 25 seconds of a long video to download faster than the rest to avoid midstream buffering
# $initialburst = time()+25;
        
        # assemble packet interval
        $packet_interval = (XMOOV_CONF_ALLOW_DYNAMIC_BANDWIDTH && isset($_GET[XMOOV_GET_BANDWIDTH])) ? getBandwidthLimit('interval') : XMOOV_BW_PACKET_INTERVAL;
        # assemble packet size
        $packet_size = ((XMOOV_CONF_ALLOW_DYNAMIC_BANDWIDTH && isset($_GET[XMOOV_GET_BANDWIDTH])) ? getBandwidthLimit('size') : XMOOV_BW_PACKET_SIZE) * 1024;
        
        # security improved by by TRUI www.trui.net
        if (!file_exists($file))
        {
            print('<b>ERROR:</b> xmoov-php could not find (' . $fileName . ') please check your settings.'); 
            exit();
        }
        if(file_exists($file) && strrchr($fileName, '.') == '.flv' && strlen($fileName) > 2 && !eregi(basename($_SERVER['PHP_SELF']), $fileName) && ereg('^[^./][^/]*$', $fileName))
        {
            $fh = fopen($file, 'rb') or die ('<b>ERROR:</b> xmoov-php could not open (' . $fileName . ')');
                
            $fileSize = filesize($file) - (($seekPos > 0) ? $seekPos  + 1 : 0);
            
            //    SEND HEADERS
            if(!XMOOV_CONF_ALLOW_FILE_CACHE)
            {
                # prohibit caching (different methods for different clients)
                session_cache_limiter("nocache");
                header("Expires: Thu, 19 Nov 1981 08:52:00 GMT");
                header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
                header("Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0");
                header("Pragma: no-cache");
            }
            
            # content headers
            header("Content-Type: video/x-flv");
            header("Content-Disposition: attachment; filename=\"" . $fileName . "\"");
            header("Content-Length: " . $fileSize);
            
            # FLV file format header
            if($seekPos != 0) 
            {
                print('FLV');
                print(pack('C', 1));
                print(pack('C', 1));
                print(pack('N', 9));
                print(pack('N', 9));
            }
            
            # seek to requested file position
            fseek($fh, $seekPos);
            
            # output file
            while(!feof($fh)) 
            {
                # use bandwidth limiting - by Terry
                if(XMOOV_CONF_LIMIT_BANDWIDTH && $packet_interval > 0)
                {
                    # get start time
                    list($usec, $sec) = explode(' ', microtime());
                    $time_start = ((float)$usec + (float)$sec);
                    # output packet
                    print(fread($fh, $packet_size));

# uncomment here if you want to have an initial burst of data to avoid midstream buffering
# if(time() <= $initialburst)
# {
#                    print(fread($fh, $packet_size * 10));
# }

                    # get end time
                    list($usec, $sec) = explode(' ', microtime());
                    $time_stop = ((float)$usec + (float)$sec);
                    # wait if output is slower than $packet_interval
                    $time_difference = $time_stop - $time_start;
                    if($time_difference < (float)$packet_interval)
                    {
                        usleep((float)$packet_interval * 1000000 - (float)$time_difference * 1000000);
                    }
                }
                else
                {
                    # output file without bandwidth limiting
                    print(fread($fh, filesize($file))); 
                }
            }
            
        }
        
    }
?>	

Then use swfobject.js (version 2) to point to your xmoov.php like this:

<head>
<title>test</title>
<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			flashvars.file = "video.flv";
			flashvars.streamer = "http://mysite.com/xmoov.php";
			flashvars.type = "http";
			var params = {};
			params.allowfullscreen = "true";
			params.allowscriptaccess = "always";
			var attributes = {};
			swfobject.embedSWF("mediaplayer.swf", "myAlternativeContent", "320", "240", "8.0.0", false, flashvars, params, attributes);
		</script>
</head>
<body>
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>

Don't forget to inject metadata into your .flv file or this won't work at all!

External Flash Players