Visit Twellow.com

Embedding & Controlling Flash Video With Actionscript

Of late, there's no questioning the ubiquity of flash video on the web: Google, Yahoo, YouTube, etc..

Given this presence (and consequent validity) more folks and more folks are entering into Flash development. Thus, the trend in web video is a boon to development, but in what vein?

Inherently, video needs a method of playback; a VCR, if you will. Flash player is (technically) our VCR, though it needs a bit of molding, as it comes "buttonless."

By this, I mean that one cannot simply embed a video and immediately have playback. Through Flash 8, Adobe provides a fairly simple method for importing clips. One adds pre-designed buttons and sliders by attaching a "skin" through an "import video" wizard.

Options then include: streaming said flv from a Flash Communications server or offering it as a progressive download. Either way, an swf file is created, referencing the "skin" and the flv, effectively creating a "dedicated player" of sorts. This swf contains a hard link to that flv file (or stream) and the skin file forever... so for each production you'll have to manage three individual files! Sound a bit messy?

The real power of Flash video is in the hands of Actionscript developers. While most tinkerers can embed a video, it's simply not a flexible or sophisticated method. What if you need to control playback via function calls? Nearly impossible.

What happens when something changes? A reprocessing of all previously published swfs!

What about a customized GUI? Anyone who's seen Jen deHaan's Flash skin-making tutorial knows how complicated this can be. Why suffer through draconian "skin" file standards and other nightmares when you can weave a bit of Actionscript?

Here at WebProNews' Video Blog ( like Google, YouTube and Yahoo ) we've opted for a more organized, Actionscript alternative: feeding video into a Flash application via externalized variables. Any method of importing data into Flash will suffice (in our case, we're utilizing a script creating dynamic XML ).

In this manner, a video symbol is created from which the flv plays. This is referenced in Actionscript which controls this symbol using attachVideo on a NetStream object. Here's the proof of concept:

    var nc = new NetConnection();
    nc.connect( null );

    var stream_ns:NetStream = new NetStream(nc);

    video_mc.attachVideo(stream_ns);
    //video_mc is the name of the video symbol placed on the stage

    stream_ns.play(path_to_flv);

At this point, the flv will be embedded into video_mc and begin playing. Flash's NetStream functions can be performed on stream_ns to pause, play, seek, and gather information about the newly embedded video.

It's a magical moment when this all comes together. Suddenly, flv lives up to the hype... you have it under your thumb. The possibilities are endless and exist within a familiar environment.

Tag:

Add to Del.icio.us | Digg | Reddit | Furl

Bookmark WebProNews:

Charlie is a videographer, web developer and occasional correspondent for the WebProNews Video Blog.

Digg This! StumbleUpon This!
AddThis Social Bookmark Widget

About the author:
Charlie is a videographer, web developer and occasional correspondent for the WebProNews Video Blog.

Comments

Article creates more Qs than it answers

I agree with Tim above... the article brings up many possibilities only to leave them up in the air.. XML?!?!

Doesn't this article seem incomplete

There is a mention of using XML in this case but no description of its implementation. Also, where to we derive the value for "path_to_flv"? I was hoping for an input parameter, perhaps parsing some GET variables inline with the SWF URL path.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
10 + 9 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
Subscribe to WebProNews


Send me relevant info