Flash Media Player

From DreamHost
Jump to: navigation, search

Overview

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

Version

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.

Converting your video in the panel

The Flash Media Player can only play videos in "FLV" format. If you need to convert your video, you can use the tool in your DreamHost panel.

  1. Visit the Goodies (Panel > 'Goodies' > 'Flash Media')
    01 Flash media player.png
  2. You have two options on this page:
    • Convert one file
    • Convert a whole directory of file
  3. Choose your domain and the file that is already uploaded into its directory.
  4. You can then choose the dimensions and quality settings.
  5. Click I'm done uploading, convert this file now....
  6. Once complete you are emailed from support@dreamhost.com notifying you that the file is converted and its new location.

The Dreamhost Flash Video Converter will have saved a copy of your video into an .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.

Adding the flv video to your site

The email you receive after the file conversion contains a few lines of code. For example:

<div id="v72435">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this video.
</div>
<script type="text/javascript" src="https://media.dreamhost.com/mp5/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("v72435").setup({
	'flashplayer': 'https://media.dreamhost.com/mp5/player.swf',
	'width': 480,
	'height': 360,
	'file': 'http://example.com/filename_480x360.flv',
	'image': 'http://example.com/filename_480x360.jpeg'
});
</script>

You can add this code to an HTML file to display your .flv video.

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.






ADVANCED

WARNING: POSSIBLE OUTDATED INFORMATION!
DreamHost does not directly support any of the features described on this page and is not responsible for keeping this content updated or accurate. Use at your own risk!
There may be additional information on the talk page.

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

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