TalkPHP - Make Your Own PHP Flash Player Which You Can Pass a File Variable with Preview!!!!

TalkPHP (http://www.talkphp.com/forums.php)

- Tips & Tricks (http://www.talkphp.com/tips-tricks/)

- - Make Your Own PHP Flash Player Which You Can Pass a File Variable with Preview!!!! (http://www.talkphp.com/tips-tricks/1701-make-your-own-php-flash-player-you-can-pass-file-variable-preview.html)

Make Your Own PHP Flash Player Which You Can Pass a File Variable with Preview!!!!

This idea was based on the player that can be found here

jw_flv_player

I have been trying to find a way with php to automatically to add a preview image to a flv file and after an exhaustive search I have found it. If you know this already, my apologies.
A lot of the credit has to go here though.
http://www.ioncannon.net/php/110/usi...y-annotations/

From there I got the basic code.

I have addded my logo, Mr Rant, to the lower left hand corner.

I also want to be able to pass a file to the player, that I can do. I also am trying to come up with a way to make a way for it to take an xml file and create a playlist.

This is the PHP that I ended up with after some modification:

Code:

function createImage($img) {

  $shape = new SWFShape();

  $shape->setRightFill($shape->addFill(new SWFBitmap(fopen($img, "rb"))));

  if ($img !="rantt.jpg") {

          $shape->drawLine(16,0);

          $shape->drawLine(0,16);

          $shape->drawLine(-16,0);

          $shape->drawLine(0,-16);



  } else {

          $shape->drawLine(80,0);

          $shape->drawLine(0,80);

          $shape->drawLine(-80,0);

          $shape->drawLine(0,-80);



  }

  return $shape;

}

function createLogo($movie, $name, $loc, $script) {

  $button = new SWFButton();

  $button->addShape(createImage($name . ".jpg"), SWFBUTTON_UP);

  $button->addShape(createImage($name . ".jpg"), SWFBUTTON_DOWN | SWFBUTTON_HIT | SWFBUTTON_OVER);

  $button->addAction(new SWFAction($script), SWFBUTTON_HIT);

  $item=$movie->add($button); 

  $item->moveto($loc,180);

}

function createButton($movie, $name, $loc, $script) {

  $button = new SWFButton();

  $button->addShape(createImage("control_" . $name . ".png"), SWFBUTTON_UP);

  $button->addShape(createImage("control_" . $name . "_blue.png"), SWFBUTTON_DOWN | SWFBUTTON_HIT | SWFBUTTON_OVER);

  $button->addAction(new SWFAction($script), SWFBUTTON_HIT);

  $item=$movie->add($button);

  $item->moveto($loc,248);

}

Ming_setScale(10.0000000);

ming_useswfversion(7);



//create our movie object

$movie = new SWFMovie(7);

$movie->setDimension(320,240);

$movie->setBackground('0×33','0×33','0×33');

$movie->setRate(8);



//now we can create our buttons 



createButton($movie, "start", 10, "_root.vStream.seek(0);");

createButton($movie, "pause", 40, "_root.vStream.pause(true);");

createButton($movie, "play", 70, "_root.vStream.pause(false);");

createLogo($movie, "rantt", 180,"_root.vStream.pause(false);");



$strAction = "

this.createTextField('video_txt', -1, 0, 0, 100, 100);

video_txt.autoSize = 'left';

video_txt.multiline = true;

video_txt.textColor = 0xeeeeee;





stop();

netConn=new NetConnection();

netConn.connect(null);

vStream=new NetStream(netConn);

video1.attachVideo(vStream);

vStream.setBufferTime(10);

vStream.play(file);//with this we can pass a file to our player

vStream.seek(1);//this is how we generate our preview image without a jpg image

vStream.pause();



videoStream.onCuePoint = function(infoObject)

{

  video_txt.text = 'Name: ' + infoObject.name + '\n';

  if( infoObject.parameters != undefined )

  {

    video_txt.text += 'Info: ' + infoObject.parameters['mydata'] + '\n';

  }

  else

  {

    video_txt.text += 'Info: undef\n';

  }

};

";



$stream = new SWFVideoStream();

$item=$movie->add($stream);

$item->setname("video1");

$movie->add(new SWFAction($strAction));

$movie->nextFrame();



$movie->save("videostream1.swf");

OK, run that once on your server in a dir with write permissions.
You will have a file named videostream1.swf saved there.

Now create the html code. You need to make both the data and value parameters equal to the videostream1.swf now for the file you can pass any flv just by adding the ?file=putwhatevervideohere.flv.

Code:

<div>

<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream1.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv" width="300" height="300" id="go"></p>

<param name="movie" value="http://www.rantnow.net/videostream1.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv" />

<param name="quality" value="high" />

</object>

</div>

I am changing the one below to a bikini workout just to show you the difference.

HTML Code:

<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream1.swf?file=http://www.rantnow.net/videos/Bikinis-Workouts.flv" width="300" height="300" id="go"></p>

<param name="movie" value="http://www.rantnow.net/videostream1.swf?file=http://www.rantnow.net/videos/Bikinis-Workouts.flv" />

<param name="quality" value="high" />

</object>

You can also see two on one page at www.rantnow.net/mrrant2.html.

The key for your logo to show is to in function createLogo to use setDepth right after you add it.

$item=$movie->add($button);
$item->setDepth(50);

then you can play with the x and y cordinates to place it where you want. I would imagine a transparent png would work better, and I will play with that to see. Just want to post an update on my progress. The neat thing about adding it as a button makes the movie play when you click the logo!

Return to an Old friend Javascript

OK, after banging my head on this for a while, I decided to go with Javascript. This is what I did created another player but this time I removed the

vStream.seek(1);//this is how we generate our preview image without a jpg image
vStream.pause();

from it and I changed the name to

$movie->save("videostream2.swf");

You should have two players, mine are videostream3,one in which the video is paused, and videostream6 in which when the user clicks on a div area it will write using Javascript and the innerHTML function the new player where our original player was.

Code:

function divClick(filename){

        var div=document.getElementById("tv");

        var sHTML="";

        sHTML+='<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream6.swf?file=http://www.rantnow.net/videos/' + filename + '" width="280" height="280" id="go"></p>';

        sHTML+='<param name="movie" value="http://www.rantnow.net/videostream6.swf?file=http://www.rantnow.net/videos/' + filename + '" />';

        sHTML+='<param name="quality" value="high" /></object>';

        //alert (sHTML);

        div.innerHTML=sHTML;

}

That function does the job for what we need to do.

Now we set everything up using

HTML Code:

<div class="player">

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

<div id="tv">

<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv&xml=" width="280" height="280" id="go"></p>

<param name="movie" value="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv" />

<param name="quality" value="high" />

</object>

</div>

<div id="preview">

<div class="smlflv" onClick="divClick('Bikinis-Workouts.flv');">

<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Bikinis-Workouts.flv" id="go" width="100" height="100"></p>

<param name="movie" value="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Bikinis-Workouts.flv" />

<param name="quality" value="high" />

</object>

<br>

<br>

bIKINI

</div>

<div class="smlflv" onClick="divClick('Simpsons-Opening-Medley.flv');">

<object type="application/x-shockwave-flash" data="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv" id="go" width="100" height="100"></p>

<param name="movie" value="http://www.rantnow.net/videostream3.swf?file=http://www.rantnow.net/videos/Simpsons-Opening-Medley.flv" />

<param name="quality" value="high" />

</object>

<br>

<br>

SIMPSONS

</div>

</div>

</div>

Then we use a little CSS to make everything look nice.

Code:

#preview{

position:absolute;

top: 0px;

left:300px;

}



.smlflv{

cursor:pointer;

}

We use the cursor:pointer; to make the hand function appear. The nice thing about this is even if the have javascript turned off it will still run in the small player!

Here's a pic

Or you can see the working one.