Play Quicktime in flash using the FLV components

May 18th, 2008 by steamfrog

I spent at least 3 hours hunting around for any kind of tutotial on “perloader for quicktime” & “making quicktime faster” blah blah. In the end I gave up… well sort of.

All I wanted to do is have the remote quicktime load faster than it was, my viewers were sitting in front of a black screen or the damn Quicktime icon for 10 minutes while the 64mb file did it’s thing. One word for that Boooring, in fact is it wasn’t my site I’d be clicking away & going somewhere else.

So here is my solution.

First off you should know how to use swf object and how to use the video component in flash.

Open flash and go to the components screen.

Add an instance to the stage, rezise it to suit your needs and all that stuff. Now open the component Inspector (same menu as the component)

In the source panel write the FULL URL of the quicktime file (I even used an MP4 file)

Save & publish as you normally would.

The end result should be a streaming Quicktime experience as seen below. It even has the standard flv controls.

Cool.. ok here is the best part you can pass a FlashVar to this via the swfobject. Get SWF object from here: http://blog.deconcept.com/swfobject/

Add this between the <head> tags <script type="text/javascript" src="js/swfobject.js"></script> & this to the area in the body of your page where you want the flash to play.

<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("name of the SWF you made earlier.swf","sotester", "630", "550", "9.0.124", "#FFFFFF");
so.addVariable("vidURL", "http://example.com/movie.mp4");
so.useExpressInstall('expressinstall.swf');
so.write("#ID of the DIV the flash will be in");

// ]]>
</script>

Change this to any url with php and you have a dynamic player.

so.addVariable("vidURL", "http://example.com/movie.mp4");

Doing the same thing with Netstream

To preload an FLV file:

1. Create a new FLA file called preloadFLV.fla.

2. In the Library panel (Window > Library), select New Video from the Library
pop-up menu.

3. In the Video Properties dialog box, name the video symbol and select Video (ActionScript controlled).

4. Click OK to create a video object.

5. Drag the video object from the Library panel to the Stage to create a video object instance.

6. With the video object selected on the Stage, type my_video in the Instance Name text box in the Property inspector (Window > Properties > Properties).

7. With the video instance still selected, type 320 in the width text box and 213 in the height text box in the Property inspector.

8. Select Frame 1 in the Timeline, and open the Actions panel (Window > Actions).

9. Type the following code in the Actions panel:

var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(null);
var stream_ns:NetStream = new NetStream(connection_nc);
my_video.attachVideo(stream_ns);
stream_ns.play(vidURL); – See the swfobject code above!

this.createTextField(”loaded_txt”, this.getNextHighestDepth(), 10, 10, 160, 22);
var loaded_interval:Number = setInterval(checkBytesLoaded, 500, stream_ns);
function checkBytesLoaded(my_ns:NetStream) {
var pctLoaded:Number = Math.round(my_ns.bytesLoaded / my_ns.bytesTotal * 100);
loaded_txt.text = Math.round(my_ns.bytesLoaded / 1000) + ” of ” + Math.round(my_ns.bytesTotal / 1000) + ” KB loaded (” + pctLoaded + “%)”;
progressBar_mc.bar_mc._xscale = pctLoaded;
if (pctLoaded >= 100) {
clearInterval(loaded_interval);
}
}