Jump to content


[Snippet] FLV Player v2 (Embedded Media Player)


  • You cannot reply to this topic
6 replies to this topic

#1 hechacker1

    Etomite Forum Fan

  • Member
  • Pip
  • 59 posts

Posted 20 November 2007 - 06:44 PM

File Name: FLV Player v2 (Embedded Media Player)
File Submitter: hechacker1
File Submitted: 20 Nov 2007
File Updated: 13 Dec 2007
File Category: 3rd Party Integration

This is version 2 of the FLV Player inspired by code that Hurby originally made for etomite. I have minimized the amount of code needed to get flv (flash) videos embedded in your website. I also developed a simple php-http streaming script that works in conjunction with the flv player to provide pseudo-streaming (although I think it works better than the real thing!).

The snippet:
I assume you will have your flvplayer.swf stored in the "moviez" directory located on the site root (at the same level as index.php). The $output line contains all the magic with the embed call. I have left my flashvars in the code if you want to copy my setup. Notice that I force type "flv" since some of my files are not named flv. For a detailed list of flashvars, please visit:
http://www.jeroenwijering.com/extras/readme.html

To download the JW FLV Player go here:
http://www.jeroenwijering.com/?item=JW_FLV_Player

[[flvplayer]]
//$height = '300';	   //default 
//$width = '400';		//default 
//$flv = 'video.flv';	  //default

$swf = 'moviez/flvplayer.swf'; //this is the flv player

// Get variables
$height = (isset($h))? $h : $height;
$width = (isset($w))? $w : $width;
$flv = (isset($vid))? $vid : $flv; 

$output = "<embed src='$swf' width='$width' height='$height' type=\"application/x-shockwave-flash\" allowfullscreen='true' flashvars='file=$flv&usefullscreen=true&type=flv&displayheight=$height&backcolor=0x000000&frontcolor=0xFFFFF0&bufferlength=1&largecontrols=true'>";
 
return $output;

The snippet call looks like this:

[[flvplayer?vid=/moviez/austin_powers.flv&h=368&w=704]]

vid = the location of the video file with respect to the site root.
h = height
w = width

Simple eh?

The above is all you need for progressive downloading.

If you would like php-streaming, the add the following flashvar: "&streamscript=stream.php" i.e. &largecontrols=true&streamscript=stream.php

If you want php-streaming for your flv files, then you first have to encode them with "keyframe" metadata. Use this tool:
http://www.buraks.com/flvmdi/
I'd recommend downloading the GUI and cli. Make sure to check the XML output to see if the metadata was properly inserted (it isn't always with large files).

Now, create a "stream.php" in your "moviez" folder. The flvplayer.swf reads the stream.php located within its own directory.
stream.php
<?php

$file = $_SERVER["DOCUMENT_ROOT"]."/".$_GET["file"];
$pos = (isset($_GET["pos"])) ? intval($_GET["pos"]): 0;

header("Content-Type: video/x-flv");
header('Content-Length: ' . filesize($file));

if($pos > 0) {
print("FLV");
print(pack('C',1));
print(pack('C',1));
print(pack('N',9));
print(pack('N',9));
}

$fh = fopen($file,"r");
fseek($fh, $pos);

fpassthru($fh);

fclose($fh);

exit;

?>

I used fpassthru in the above example because it is the fastest on my server (Dreamhost). Another widely used method is replacing fpassthru with:
while (!feof($fh))
{ echo fread($fh, 8192); @ob_flush(); @flush(); }

It reads the file in chunks of 8192 bytes (the maximum for fread in php v5). But fread actually only serves exactly the right amount of data from the file to fill a network packet. You can also enable bandwidth limiting by lowering the byte rate and/or adding a sleep() statement in the while loop.

That should be it for php-streaming. If it works right then even a large flv file streams almost instantly to any point on the file.

Note: mod_gzip on some server configurations prevents the stream.php from flushing out the data until the entire function is done (which means buffering the entire file!) as an optimization technique. Dreamhost does that, and I had to wait for the Dreamhost servers to process my entire 800MB flv files before they got sent to the browser and flvpalyer. I had them turn off mod_gzip and now the streams are instant and the server isn't buffering my data. (my website is faster too despite losing gzip compression).

Examples:
http://ordorica.org/video

Only the Global Warming Swindle and LC2E have metadata, thus they are the only ones that can stream. The other files just act like progressive downloads. Pretty nice for a 1Mbit stream? :D

Click here to download this file

Edited by hechacker1, 13 December 2007 - 07:34 PM.


#2 hechacker1

    Etomite Forum Fan

  • Member
  • Pip
  • 59 posts

Posted 09 May 2008 - 03:06 AM

The flvplayer has been merged into a single mediaplayer (there are LOTS of new features and options). However, the old code works OK with the new mediaplayer.swf.

Download it here:
http://www.jeroenwij...player-3-16.zip

And as always read the README if you would like to configure your player. I am posting my updated [[flvplayer]] code with some new options. The goal of my config is to just embed a single video with minimal code.

One caveat, in order to get code that passes xhtml, you have to use external javascript. You can read about it on the players website. Really, what we need is HTML5 with a video tag.

//$height = '300';	   //default 
//$width = '400';		//default 
//$flv = 'video.flv';	  //default
$type = 'flv';	//default

$swf = 'moviez/mediaplayer.swf'; //this is the flv player
$script = '&streamscript=stream.php'; //if you want streaming flv videos
$auto = 'autostart=true';

// Get variables
$height = (isset($h))? $h : $height;
$width = (isset($w))? $w : $width;
$flv = (isset($vid))? $vid : $flv;
$type = (isset($t))? $t : $type;
$script = (isset($s))? $s : $script;
$auto = (isset($a))? $a : $auto;

$output = "<embed src='$swf' width='$width' height='$height' type=\"application/x-shockwave-flash\" allowfullscreen='true' flashvars='file=$flv&usefullscreen=true&type=$type&displayheight=$height&backcolor=0x000000&frontcolor=0xFFFFF0&lightcolor=0xff9933&bufferlength=1&largecontrols=true$script'>";

return $output;


#3 hechacker1

    Etomite Forum Fan

  • Member
  • Pip
  • 59 posts

Posted 15 May 2008 - 05:33 AM

Ok, now I have xml validating code, but you must use the swfobject.js file (version 1.5).
http://blog.deconcep...bject/#download

Go here for more information on controlling the flashvars for the media player:
http://www.jeroenwij...Embedding_Flash

Besides validating, it also produces easier to read and maintain code. The negative is that your viewers will have to download the swfobject.js once (6K).

You have to import the script in your html:
<script type="text/javascript" src="swfobject.js"></script>

[[flvplayer]]
//$height = '300';	   //default 
//$width = '400';		//default 
//$flv = 'video.flv';	  //default
$type = 'flv';	//default

$swf = 'moviez/mediaplayer.swf'; //this is the flv player
$script = '&amp;streamscript=stream.php';
$auto = 'autostart=true';

// Get variables
$height = (isset($h))? $h : $height;
$width = (isset($w))? $w : $width;
$flv = (isset($vid))? $vid : $flv;
$type = (isset($t))? $t : $type;
$script = (isset($s))? $s : $script;
$auto = (isset($a))? $a : $auto;
$dwidth = $width + 13; //this expands the toolbar

$output = "<div id=\"video\"> this will be replaced by the SWF.</div>";
$output .= "
<script type=\"text/javascript\">
  var so = new SWFObject('$swf','$type','$width','$height','7');
  so.addParam('allowfullscreen','true');
  so.addVariable('backcolor','0x000000');
  so.addVariable('file','$flv');
  so.addVariable('displayheight','$height');
  so.addVariable('displaywidth','$dwidth');
  so.addVariable('frontcolor','0xFFFFF0');
  so.addVariable('lightcolor','0xff9933');
  so.addVariable('screencolor','0x121212');
  so.addVariable('script','$script');
  so.addVariable('largecontrols','true');
  so.addVariable('bufferlength','1');
  so.write('video');
</script>
";

return $output;

for examples:
http://ordorica.org/video

Edited by hechacker1, 15 May 2008 - 05:40 AM.


#4 hechacker1

    Etomite Forum Fan

  • Member
  • Pip
  • 59 posts

Posted 19 October 2008 - 01:17 AM

Once again I updated the code for version 4 of the player.

[[flvplayer]]
//$height = '300';	   //default 
//$width = '400';		//default 
//$flv = 'video.flv';	  //default
$type = 'flv';	//default

$swf = 'moviez/player.swf'; //this is the flv player
$script = 'stream.php';
$auto = 'autostart=true';

// Get variables
$height = (isset($h))? $h : $height;
$width = (isset($w))? $w : $width;
$flv = (isset($vid))? $vid : $flv;
$type = (isset($t))? $t : $type;
$script = (isset($s))? $s : $script;
$auto = (isset($a))? $a : $auto;
$dwidth = $width + 13;

$output = "<div id=\"video\">This text should be replaced by a flash video.</div>";
$output .= "
<script type=\"text/javascript\">
var s1 = new SWFObject('$swf','ply','$width','$height','7');
s1.addParam('allowscriptaccess','always');
s1.addParam('allowfullscreen','true');
s1.addParam('flashvars','file=$flv&type=$type&streamer=$script&backcolor=000000&frontcolor=FFFFF0&lightcolor=ff9933&screencolor=121212&bufferlength=1&controlbar=over');
s1.write('video');
</script>
";

return $output;

Notice the new streamer variable, and the removal of some others. Also, the "ply" can be changed to any name.

the stream.php also got updated. Now the "pos" variable is "start"
stream.php
<?php

$file = $_SERVER["DOCUMENT_ROOT"]."/".$_GET["file"];
$start = (isset($_GET["start"])) ? intval($_GET["start"]): 0;

#print "<pre>File: " . $file . "\nSeek Position: " . $start; exit;

header("Content-Type: video/x-flv");
header('Content-Length: ' . filesize($file));

if($start != 0) {
print("FLV");
print(pack('C',1));
print(pack('C',1));
print(pack('N',9));
print(pack('N',9));
}

$fh = fopen($file,"rb");
fseek($fh, $start);

fpassthru($fh);
fclose($fh);
exit;

?>


#5 fishnchips

    Etomite Forum Fan

  • Member
  • Pip
  • 65 posts

Posted 20 October 2008 - 07:06 PM

This post was overflowing. In short: in the code, stream.php has to be removed if you don't use it.

Now the current problem: it doesn't autoplay. I'm using this code in [[flvplayer]]:

//$height = '300';	   //default
//$width = '400';		//default
//$flv = 'video.flv';	  //default
$type = 'flv';	//default

$swf = 'clips/player.swf'; //this is the flv player
$auto = 'autostart=true';

// Get variables
$height = (isset($h))? $h : $height;
$width = (isset($w))? $w : $width;
$flv = (isset($vid))? $vid : $flv;
$type = (isset($t))? $t : $type;
$script = (isset($s))? $s : $script;
$auto = (isset($a))? $a : $auto;
$dwidth = $width + 13;

$output = "<div id=\"video\">This text should be replaced by a flash video.</div>";
$output .= "
<script type=\"text/javascript\">
var s1 = new SWFObject('$swf','ply','$width','$height','7');
s1.addParam('allowscriptaccess','always');
s1.addParam('allowfullscreen','true');
s1.addParam('flashvars','file=$flv&type=$type&streamer=$script&backcolor=000000&frontcolor=FFFFF0&lightcolor=ff9933&screencolor=121212&bufferlength=1&controlbar=over');
s1.write('video');
</script>
";

return $output;

And using this to call it:
[[flvplayer?vid=/clips/video.flv&h=160&w=474]]
What's up?

Edited by fishnchips, 20 October 2008 - 07:40 PM.


#6 hechacker1

    Etomite Forum Fan

  • Member
  • Pip
  • 59 posts

Posted 26 October 2008 - 07:16 AM

I didn't add the autostart flashvar in the example code. I really need to clean it up.

Something like:
$output = "<div id=\"video\">This text should be replaced by a flash video.</div>";
$output .= "
<script type=\"text/javascript\">
var s1 = new SWFObject('$swf','ply','$width','$height','7');
s1.addParam('allowscriptaccess','always');
s1.addParam('allowfullscreen','true');
s1.addParam('flashvars','file=$flv&type=$type&$auto&backcolor=000000&frontcolor=FFFFF0&lightcolor=ff9933&screencolor=121212&bufferlength=1&controlbar=over');
s1.write('video');
</script>
";

I added &auto, and removed the &streamer in the above example.

Here are the flashvars you can use.

http://code.jeroenwi.../wiki/FlashVars

Generally you just append them with &flashvar. My script does some substitution though, like $auto for autostart=true. So after the substitution, &$auto becomes &autostart=true.

You could just hard code everything. I only used variables to make it a little easier to manage different settings without having to find each flashvar in the code.

View Postfishnchips, on Oct 20 2008, 12:06 PM, said:

This post was overflowing. In short: in the code, stream.php has to be removed if you don't use it.

Now the current problem: it doesn't autoplay. I'm using this code in [[flvplayer]]:

//$height = '300';	   //default
//$width = '400';		//default
//$flv = 'video.flv';	  //default
$type = 'flv';	//default

$swf = 'clips/player.swf'; //this is the flv player
$auto = 'autostart=true';

// Get variables
$height = (isset($h))? $h : $height;
$width = (isset($w))? $w : $width;
$flv = (isset($vid))? $vid : $flv;
$type = (isset($t))? $t : $type;
$script = (isset($s))? $s : $script;
$auto = (isset($a))? $a : $auto;
$dwidth = $width + 13;

$output = "<div id=\"video\">This text should be replaced by a flash video.</div>";
$output .= "
<script type=\"text/javascript\">
var s1 = new SWFObject('$swf','ply','$width','$height','7');
s1.addParam('allowscriptaccess','always');
s1.addParam('allowfullscreen','true');
s1.addParam('flashvars','file=$flv&type=$type&streamer=$script&backcolor=000000&frontcolor=FFFFF0&lightcolor=ff9933&screencolor=121212&bufferlength=1&controlbar=over');
s1.write('video');
</script>
";

return $output;

And using this to call it:
[[flvplayer?vid=/clips/video.flv&h=160&w=474]]
What's up?

Edited by hechacker1, 26 October 2008 - 07:20 AM.


#7 hechacker1

    Etomite Forum Fan

  • Member
  • Pip
  • 59 posts

Posted 26 October 2008 - 07:29 AM

Let me just go ahead and try to clean it up. (WORK IN PROGRESS)

flvplayer
//default settings
//$height = '300';	   //default
//$width = '400';		//default
//$flv = 'video.flv';	  //default
$type = 'flv';	//default
$script = 'stream.php'; //php stream script, or rtsp link.

$swf = 'clips/player.swf'; //this is the flv player
$auto = '&autostart=true';

// Get variables from the snippet call
$height = (isset($h))? $h : $height;
$width = (isset($w))? $w : $width;
$flv = (isset($vid))? $vid : $flv;
$type = (isset($t))? $t : $type; //in the case you want to specify the type
$script = (isset($s))? $s : $script; //in the case you only want to use the script sometimes
$auto = (isset($a))? $a : $auto; //in thecase you only want to use autostart sometimes

//now begins the output to html
$output = "<div id=\"video\">This text should be replaced by a flash video.</div>";
$output .= "
<script type=\"text/javascript\">
//you can substitute var s1 for var s0, var s2, etc.
//the 7 refers to flash player 7, 9 is valid too
var s1 = new SWFObject('$swf','ply','$width','$height','7');
s1.addParam('allowscriptaccess','always');
s1.addParam('allowfullscreen','true');
s1.addParam('flashvars','file=$flv&type=$type&streamer=$script&backcolor=000000&frontcolor=FFFFF0&lightcolor=ff9933&screencolor=121212&bufferlength=1&controlbar=over$auto');
s1.write('video');
</script>
";

return $output;

I will give a hardcoded version later. But I think the idea is pretty simple. If you don't need the streaming, then just remove the &streamer=$script from the flashvar line. If you don't need autostart, then remove $auto.

Or if you don't need auto, you can do something like [[flvplayer?vid=movie.flv&w=100&h=100&a=]]

Basically, leaving a= blank, so that when it passes the blank variable into the code, it doesn't autostart. (That's because $auto gets overwritten from the default of $auto='&autostart=true' to $auto=''

And when the php is parsed, $auto is blank and it disappears from the html output.)

I need to rewrite the $streamer variable to do the same. Later (WIP). It's late right ow.

Edited by hechacker1, 26 October 2008 - 07:46 AM.






1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users