This is easily the question I get asked the most about video.Maru: how can I put controls on top of the videoWindow?

It’s very easy to do:

• select the videoWindow MovieClip
• Hit the F8 key to convert that to a MovieClip - essentially embedding the videoWindow within another MovieClip
• Give it any symbol and instance name you want
• Make sure that your controls are on a layer above the layer which holds the videoWindow holder - you probably already did this

video.Maru uses recursion to find all the controls so you could nest the videoWindow, or any other control, inside as many MovieClips as you wish and it will still work - provided the control is defined on frame one of the timeline.
The reason that the videoWindow ends up on top of other controls is that the videoWindow gets replaced at runtime with a MovieClip that is embedded in the Library.

MovieClips created at runtime automatically get placed on top of any MovieClips that are on the stage at authoring time. That’s because authoring time MovieClips get a depth starting at -16383. Creating MovieClips at runtime defaults to starting at a depth of 0, above anything on the Stage at authoring time.

I received a handful of emails and comments here at polyGeek.com telling me that youTube videos weren’t streaming through video.Maru any longer.

The good news is that I got it to work again, although it will takes a little more work to get the ID string. The bad news is that Google/youTube can change things around at any time and make it more difficult or impossible to stream their videos through video.Maru. If you are using this feature for your clients I’d be sure to have a backup in case if this happens again. Or should I say when it happens again.

You will need to use the new video.Maru 3.0 beta SWC to make this work.

Since making the change youTube has changed again and the fix doesn’t seem to be working. If the video below plays when you click the play button then it’s working. Otherwise youTube is messing around with things again. Use this feature at your own risk.

Here’s the new method of getting the ID string:

1 - Go to youTube and pick out the video that you want to stream through video.Maru.

You will get a URL that looks something like this: http://youtube.com/watch?v=IDstring.

2 - Edit the URL string by removing the word watch? And change the “=” sign to a “/”. Here is an example:

3 - Now browse to that URL and you will get a very long URL and the video you were watching will appear in a large video interface. You need to grab two pieces of that new URL as illustrated below:

4 - The string that you want to give to video.Maru in order to play a video is: youtube=SomeID&t=SomeLongString.

To play the video above would be: youtube=uCsdPszJLNQ&t=OEgsToPDskJK0D5QnoklN-REer7a0Cq2

You can use that in your XML or directly in your videoWindow or in a linkBtn.

Thanks to Abdul Qabiz’s Blog for figuring out the details on how to implement the changes.

Learn how to use the video.Maru API to create a comboBox navigation.

Use the video.Maru API to change the linkBTN text color when the btn is pressed.

Important: when accessing the video.Maru API you are targeting the SWC that you have placed in your FLA. You do not need to give the SWC an instance name because it does that for itself. That instance name is videoMaru.

The cornerstone to the video.Maru API is the videoMaruCreationComplete function. That is a function that you write and video.Maru will call that function for you when it has finished setting up the video interface.

The videoMaruCreationComplete function is where you’ll place code that is there to set or override certain properties of video.Maru. If for instance you wanted to change the size of the videoWindow on startup to reflect the dimensions reported by the FLV metaData then you’ll have to wait until the video.Maru code gets far enough that it knows what the videoWindow is. You can see a code sample of this below under getVideoMetaHeight.

It’s a good practice to place your videoMaruCreationComplete function on the same layer as the video.Maru SWC.

closeNetstream() ( beta )
Closing the Netstream object halts the download of the video stream and stops playback. When you click on a videoLink it will create a new Netstream and begin playback.

formatTime( s:String ):String
Takes a String that indicates a duration of time and returns a properly formated hour:minute:second display. Note: the reason it takes a String and not a Number is that the video metaData returns a String for the duration. Example: if you pass formatTime( 125 ) it will return 2:05.

getCurrentFLV():String
If you need to know what the current path/fileName.flv then use this. It would be handy if for instance you wanted to give someone the option to download the FLV to their system.

getIsPlaying():Boolean
Returns a true/false regarding the current state of playback. Usage: you might use this in an onEnterFrame if you want to track the current state of the playback so that when the video is not playing you could do something bandwidth intensive.

getLinkButtonArray():Array
Returns an array of all the linkBTNs corresponding to the videos listed in an XML file. Usage: you can loop through the array and add a number to the beginning of each linkBTN.link TextField. Or you could use it to change the appearance of a linkBTN after the user has played that video.

getVideoMetaHeight():Number
Returns the height of the video that is currently playing as reported by the metaData in the FLV. You cannot depend on this value being available in all cases. The Flash video encoder does add this metaData but not all encoders do. For instance the youTube videos that I have checked do not report the width/height in the metaData.

The code sample below will resize the videoWindow to fit the actual size of the FLV each time the video changes. If there is no width/height embedded in the metaData then it defaults to 320×240.

Note: there is a bit of a delay from the video starting to the resize. That’s caused by the delay in the Flash player reading the metaData. I don’t know of anything that can be done about that. Other than including the width/height in your XML file and getting the data from that. But that’s another project.

playVideo(s:String):Void
Send a path/filename.flv to this function and it will play that FLV, if it can be loaded.

setFadeTrayDuration(n:Number):Void
The fadeTray takes 1.5 seconds to fade in and out. If you would like to change that then pass in the number of seconds you would like to change it to. As an example if you wanted it to take 3 seconds to fade in and out then use this:

video.Maru.setFadeTrayDuration(3);

setFullScreenCallback(fn:Function):Void
description

setIsPlaying(b:Boolean):Void
You can bypass the play_btn/pause_btn with your own control by calling this function and passing the state of isPlaying. To pause the video call:

videoMaru.setIsPlaying(false);

This is especially useful if you want to have two separate buttons for the play and the pause. With the video.Maru interface that is not possible. You’ll have to create a button for each state - but don’t give them instance names of play_btn or pause_btn.

Here is some sample code for two buttons placed on the same layer as the video.Maru SWC

setLinkBtnPressed( fn:Function ):Void
Get notified when the user clicks on a linkBTN. Usage: you could use this to change the state of the button when pressed and then switch it back when released with setLinkBtnReleased().

setLinkBtnReleased( fn:Function ):Void
Get notified when the user clicks and releases on a linkBTN. Usage: you could use this to change the state of the button when pressed with setLinkBtnPressed() and then switch it back when released.

setMetaDataChangedCallback(fn:Function):Void
When the Flash player detects a change in the FLV metaData this function that you specify will be called. You can see an example of this under getVideoMetaHeight() above.

setMute(b:boolean):Void
Set the volume mute state: true/false.

setOnCuePoint( fn:Function ):Void
Set the callback function that is called when a cue point in your video is reached. You can read more about it here. Download the example.

setOnVideoComplete(fn:Function):Void
Set the callback function that is called when a video completes playing. See example.

setSmoothing(b:Boolean):Boolean
Turn smoothing on or off. Smoothing determines whether the video should be smoothed (interpolated) when it is scaled. For smoothing to work, the player must be in high-quality mode. The default value is false (no smoothing).

setVideoChangeCallback(fn:Function):Void
If set calls the function you specify when the FLV playing in the videoWindow is changed.

setVideoWindowHeight(n:Number):Void
Change the height of the videoWindow. See getVideoMetaHeight() above for an example.

setVideoWindowWidth(n:Number):Void
Change the width of the videoWindow. See getVideoMetaHeight() above for an example.

setVideoWindowX(n:Number):Void
Change the _x value of the videoWindow.

setVideoWindowY(n:Number):Void
Change the _y value of the videoWindow.

setXmlCallback(fn:Function):Void
Set a function to be called when the XML has been parsed into an object. The callback that you set needs to accept an argument of type Object. See below for an example.

toggleFullScreenVideo():Void
Toggles the fullScreen between fullScreen and in-browser views.

togglePlayPause():Void
Toggles the video playback between paused and playing. It will also change the state of your play_btn/pause_btn if available.

Watch a video tutorial on creating a fadeTray.

The fadeTray is a MovieClip that you create to put whatever interface elements you want into so that they will fade out when the user doesn’t move their mouse after a specified period of time.

To use one make a MovieClip and give it an instance name of fadeTray#. The # indicates to video.Maru how long you want to wait after the user stops moving their mouse before the fadeTray begins to fade out.

For example, if you gave an instance name of fadeTray4. Then the mouse would have to remain motionless for 4 seconds before your fadeTray began to fade out.

Note: video.Maru will ignore mouse movements of less than 2 pixels per second. This way if the user just giggles the mouse a tiny bit they won’t be distracted by the fadeTray fading back in. This is what we call, “attention to user experience.” Why? Because I care.

By default it takes 1.5 seconds for the fadeTray to completely fade. The only way to change this value is with the video.Maru API.

Keeping the fadeTray on top

The nice thing about a fade tray is that you can put the user controls on top of the video. The problem lies with the fact that the MovieClip that you define as the videoWindow gets dynamically replaced at runtime. That means that the depth of the videoWindow will be on top of anything else on it’s layer regardless of how you stack things.

There is a very simple solution to this. Place your fadeTray on a layer above the videoWindow. Now select the videoWindow and hit F8 to convert it to a MovieClip. It doesn’t matter what you name the Symbol or what, if any, instance name you give to this MovieClip. All that matters is that now the videoWindow is embedded in a MovieClip. Now when it gets replaced at runtime it will stay under your fadeTray. This is all just part of the magic of depths in Flash.

Watch a video tutorial covering how to create a fullScreen video interface with video.Maru.

To create a button that toggles the FullScreen view create a MovieClip and give it an instance name of fullscreen_btn. That button will act as a toggle to switch back and forth from in-browser to FullScreen views.

You’re done as far as video.Maru is concerned. But there’s a bit of work to on the HTML container page to allow this to work.

The <object><embed> tags need to have attributes that give the SWF permission to go FullScreen. The simple version of this is to find the allowFullScreen tag and give it a value of true.

If you would like to read more visit the Exploring full-screen mode in Flash Player 9 on the Adobe.com site for more details.

FullScreen support requires the Flash 9,0,28,0 player or above.

Be sure to read the video.Maru API page for more details about how to control FullScreen and change the layout of your design when switching.

Watch the video tutorial on creating a reflection and masking the videoWindow

To create a reflection of the videoWindow make a MovieClip and give it an instance name of reflection. You can place it anywhere in relation to the videoWindow MovieClip but it looks best if it goes directly below.

The shape inside the reflection MovieClip can fade out by using a gradient that has an alpha fade applied.

For best results you can make the reflection MovieClip just slightly wider than the videoWindow MovieClip. If they are both the same width you may notice that the reflection is 1 pixel short of the width of the videoWindow.

Masks are very easy to create. Just make a MovieClip in the shape that you want the mask to be and place it over the videoWindow. Give the mask an instance name of videoMask. That’s it.

You can experiment with using wild shapes or text in the videoMask MovieClip. If you use text make sure that the TextField is of type static and not dynamic. Also, make sure that the font isn’t a device font such as _sans.

Watch video tutorial on creating a videoWindow and it’s features

The videoWindow is the instance name of the MovieClip you create that will be replaced at runtime to display the video that you have indicated.

In order to tell the videoWindow which video to play you create a dynamic TextField inside the videoWindow and put the path to your FLV, or XML, file in TextField.

The _alpha setting of your videoWindow MovieClip will be applied to your video.

There are four ways to indicate which FLV to play.

1 - by relative path from the swf file that you are working with.

Example: “vids/water.flv”

2 - by using an http address.

Example: “http://polygeek.com/video_tutorials/vids/sea.flv”

3 - by pointing to an XML file that has the necessary data.

Example: “data/videos.xml” or “http://polygeek.com/video_tutorials/vids/videos.xml”

4 - Feature to be reveled soon.

The videoWindow MovieClip gets replaced at runtime with elements inside the SWC. You didn’t actually think a MovieClip could play a video did you?

MovieClips that are placed on the stage at runtime have a higher depth than those at authoring time. (Technically speaking, all objects on the stage at authoring time have large negative depths.) So how would you be able to put something over the videoWindow at authoring time and have it stay there? It’s pretty simple. Just embed the videoWindow inside of another MovieClip. The MovieClip that now holds the vidoeWindow does not need an instance name. Now the graphics that you place over the MovieClip that is holding the videoWindow will stay on top of the videoWindow.

If this seems nonsensical and bewildering then welcome to the world of depth management in Flash.