Building a basic controller for the VideoDisplay control

I had to change ’skin’ to ‘upSkin’ to display it properly.

Reply

Rehana Rahman,

I recreated the project in Flex Builder 3 and reuploaded the files. Let me know if you still have any problems downloading the files.

Peter

Reply

Niks,

For the 10 second video question… that’s a little tricky. I think the best way to do it (apart from re-editing the videos) would be to embed cue points in the FLV directly. Since I’m not sure if that is possible (and either requires third-party tools such as FLVTool2 (see http://blog.inlet-media.de/flvtool2/) or possibly reencoding the videos and embedding the cue points — at which point you may as well trim the video anyways), you can also create ActionScript cue points dynamically and add them to the video at runtime. This last method (dynamically adding ActionScript cue points) does have its caveats though. ActionScript cue points aren’t exactly accurate, and (I believe) depend on the FLV files keyframe intervals. I made a “simple” example below which should maybe, hopefully, do what you’re looking for, but you can see that it doesn’t always seek exactly to 3 seconds and stop exactly at 7 seconds. It may all just depend on your video and whatever encoding settings were used.

As for your second question (DAT, MPEG vs FLV). Currently the VideoDisplay (and other video classes such as NetStream, NetConnection, and Video) only support FLV files, to my knowledge. There is currently a Flash Player in beta which will support other formats such as FLV, MP4 and MOV files. For more information, see the following blog posts:
http://blogs.adobe.com/rgalvan/2007/08/flash_player_will_support_h264.html (Richard Galvan is the technical Product Manager for the Flash Authoring tool)
http://weblogs.macromedia.com/emmy/archives/2007/08/big_day_for_web.cfm (Emmy Huang is the Product Manager for Adobe Flash Player)
http://www.kaourantin.net/ (Tinic Uro is an Adobe Flash Player engineer and his site has lots of great, and detailed, information)

There are probably a lot more posts out there, but those were the first three I found.

Hopefully that helps. Large code dump below!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
            import mx.events.CuePointEvent;
            import mx.events.VideoEvent;

            private function videoDisplay_ready(evt:VideoEvent):void {
                addVideoCuePoints();
            }

            private function videoDisplay_resize(evt:ResizeEvent):void {
                /* Create a reference to the VideoDisplay control on the
                   display list. */
                var vd:VideoDisplay = VideoDisplay(evt.currentTarget);
                /* Make sure the VideoDisplay control's total time is
                   numeric. The first time this event is dispatched the
                   value is NaN, but the second time seemingly gets
                   dispatched after the "ready" event, and contains the
                   correct length. */
                if (!isNaN(vd.totalTime)) {
                    var cuePoint:Object = vd.cuePointManager.getCuePointByName("start");
                    /* Make sure the named cue point was found, otherwise
                       you get an RTE. */
                    if (cuePoint != null) {
                        videoDisplay.playheadTime = cuePoint.time;
                    }
                }
            }

            private function videoDisplay_cuePoint(evt:CuePointEvent):void {
                switch (evt.cuePointName) {
                    case "start":
                        // do nothing
                        break;
                    case "end":
                        videoDisplay.pause();
                        break;
                }
            }

            private function addVideoCuePoints():void {
                var cpArr:Array = [];
                cpArr.push({name:"start", time:3});
                cpArr.push({name:"end", time:7});
                /* Add the array of cue points to our video display. */
                videoDisplay.cuePointManager.setCuePoints(cpArr);
            }
        ]]>
    </mx:Script>

    <!-- URL of the video file to load. -->
    <mx:String id="VIDEO_URL">
        <![CDATA[http://www.helpexamples.com/flash/video/caption_video.flv]]>
    </mx:String>

    <mx:NumberFormatter id="numberFormatter" precision="3" />

    <mx:VideoDisplay id="videoDisplay"
            autoPlay="false"
            source="{VIDEO_URL}"
            cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
            ready="videoDisplay_ready(event);"
            resize="videoDisplay_resize(event);"
            cuePoint="videoDisplay_cuePoint(event);" />

    <mx:Label text="total: {numberFormatter.format(videoDisplay.totalTime)}" />
    <mx:Label text="currn: {numberFormatter.format(videoDisplay.playheadTime)}" />

    <mx:Button label="play" click="videoDisplay.play();" />

</mx:Application>

Happy Flexing!
Peter

Reply

Hi,

I am working on VC , I have two problems in my project.
one is how to automatically play a progress bar control and the other is how to terminate a thread which is used to cal a dialog box containing progress bar control. Indicating a waiting task.
So please help me in this regard.

Thanks in advance.

Reply

Hey Peter — Good articles/blog/stuff. A comment and a question.

The cuepoint example you give a couple comments up seems to imply that you can use cues as a way to start from the middle of a video. Jumping to the cue point only works if the video is loaded up to that point (or if you’re running a media server, I suppose). If you set the cues in your example to 10 and 17, it just sits at 0.

While it seems you have moved on from VideoDisplay, I am wondering if there are any techniques or resources for optimizing playback. I’m just playing a single video, but the video and audio chop and jump every so often. The video jump alone wouldn’t be too terrible, but the audio pop makes it really disruptive.

I’ve bound a couple actions to the playhead position. It’s really light stuff, but that is the only bit of the code that seems immediately suspicious.

Any suggestion would be tremendously appreciated.

Thanks,
rob@fuzzwich.com

Reply

i forgot to say a detail in the previous comment, this component was based on this example :D

Reply

lovely simple and elegant solution, thanx! – i’ll try to make my playhead just as sweet (!) Funny, i had “change ‘skin’ to ‘upSkin’ to display it properly.” as did Tomek (your first commenter)… i *also* need to add overSkin to the styles.

p.s. i love the famfamfam icons… great to see them here too :)

Reply

Hi again,
Finally I found out where the problem was.
It had almost nothing to do with the player.
I was using a php uploading script and had issues with start_session().
(Basically, when i clicked on a link, the link worked but the php file i was calling was stalling when calling session_start(), probably because my upload script, where i was calling session_start() too, had not completed.)

Sorry if I gave anny doubts on this player wich works really fine.

Reply

My mail id is krishna.revadigar@gmail.com

Reply

Hi ,I could successfully run the above video player ………….
But when I am trying to run videos from my webserver, they are not running.
I am using XAMPP package and all my flv and swf files are stored inside this :
” /…………./drupal/sites/default/files/Untitled.flv ”
Can anyone tell me how can I play my files .

Reply

Hello,

I wanted to add a progress (time) bar to my video, so the user can choose what time of the video he wants to go.
Just like YouTube has.
Do you know if that´s possible?

Reply