Sometimes you don’t know which video you want to play inside of videoMaru. Take the video player below for example. I don’t want to create a different video player for each tutorial I do, because I plan on doing lots of them.

The solution is to use FlashVars to pass a variable into videoMaru and tell it which video to play. Now I have one video player and each instance plays a specific video that I can change via the HTML containing page.

To make things easy you don’t have to write any code to make videoMaru play the video you indicate with FlashVars. It does that automatically.

I’ll also cover how you can pass variables into videoMaru via FlashVars to dynamically change things like the volume on startup through the API.

Here is some information about using the <object>/<embed> tags or SWFobject for FlashVars.

If you have a Wordpress blog and use the Kimili plugin to embed your SWFs then you can use code like this to pass FlashVars.

[kml_flashembed

   movie="/pgtv/_videoPlayerTemplate.swf"

   height="480" width="640"

   fvars="flvAddress=/pgtv/videos/68_flashVars.flv" /]

The code above is what was used to play the video tutorial on this page.

Using XML to create navigation for your video files with videoMaru is very easy. But once you’ve loaded that XML file into videoMaru you’re pretty much locked in.

Not any more.

I’ve made a simple addition to the videoMaru API - that required a good bit of replumbing - that allows you to change the source XML that you’re using for navigation. Now you can switch between XML files easily. ( You’ll need the latest videoMaru 3.5 beta SWC for this located in the example fiile. )

Here’s all you need to use it:

videoMaru.switchXML( "path/file.xml" );

switchXML accepts either the path to a file or a string of XML code. So you could also do this:

videoMaru.switchXML( "<videos><video path=’movie.flv’ linkText=’Movie’></video></videos>” );

In usage you would have the above code inside of the videoMaruCreationComple function or inside an onRelease event.

Here’s an example in action using the later method of injecting an XML string. Click on the Group# buttons to switch the navigation.

[ download example ]

I’m still working on adding more to video.Maru before launching version 3.5 but the scrolling XML nav is ready to use. Since so many people have asked for this feature I thought I’d go ahead and document it so that everyone can start using it.

[ Download Source ]

Here’s how it works:

1. Create your XML playlist as you always have. Nothing changes with that.
2. Use a linkBTNholder to hold the linkBtn’s that are created from the XML list.
3. The linkBTNholder will act as a mask for the LinkBtn’s and will determine the height of the scroll area.
4. Create scrollUp, scrollDn, and scrollThumb MovieClips. Place them on the same layer level as the linkBtnHolder. Don’t bother positioning them because the videoMaru code will do that for you.
   • The scrollUp MovieClip will be placed at the upper-right corder of the linkBtnHolder.
   • The scrollDn MovieClip will be placed at the lower-right corner of the linkBtnHolder.
   • The scrollThumb will automatically center itself horizontally between the scrollUp/ScrollDn MovieClips.
   • Note: Make sure the registration point is always at the upper-left corner for all these MovieClips.

That’s all you need to do to make it work but additionally I would suggest placing all of the above MovieClips inside their own MovieClip holder, it doesn’t need an instance name. And then place a slightly larger MovieClip to be a visual frame under the MovieClip that holds all the scrolling elements. You might also want to add a visual background to the scrollBar as you see from the example.

ScrollBar API calls
You can see that the scrolling sort of coasts to a stop. You can control that through the API by setting the setScrollBitDampener like this:

function videoMaruCreationComplete(maru:Object):Void {
videoMaru.setScrollBitDampener( 0.5 );
}

The number that you pass must be less than 1. Otherwise it will reset to the default of 0.8. To make it coast to a stop more quickly make the number very near 0.

You can also set how much the scrollBar moves each time the scrollUp/scrollDn is clicked. By default it is set to a value of 2. To move more set the value to a larger number.

function videoMaruCreationComplete(maru:Object):Void {
videoMaru.setScrollValue( 5 );
}

You should also notice that the mouse-wheel is enabled if the SWF has focus.

It’s pretty simple to perform some action when a video completes playing. You use the videoMaruCreationComplete function to set a callback - videoMaru.setOnVideoComplete( fn ) - to some function that you would like to run when your video finishes playing.

Here is a simple example that is fully commented. Hopefully you can follow this template to do what ever you need to do.

Here is the code that enables this. You’ll need to look inside the FLA to understand the layer structure and read the comments.

function videoMaruCreationComplete():Void {
videoMaru.setOnVideoComplete( theVideoIsOver );
}
//
function theVideoIsOver():Void {
this._parent._parent.gotoAndStop( "videoOver" );
}

video.Maru now has the ability to respond to cue-points in your Flash videos.

Using this feature is very easy. Just use the videoMaruCreationComplete() event to tell video.Maru which function you want to use as a callback for when a cue point is reached. Then when a video passes over a cue-point it will send that information to your callback.

Below is an example. Look for the text field below the controls to change when a cue point is reached. You could use something like this to initiate changes in your design or display a message to your users.

Here is all the code that is needed to enable the reaction to cue points: ( Download Source )

To add cue points to your video using the Flash Video Encoder just select the Cue Points tab and drag the playhead across to the scene where you want to add a cue point. Then click the “+” button and give the cue point a name. That’s pretty much all there is to it. You could then use a switch () statement in your callback function to perform complex actions or like I did in the example just update a TextField.

Would you like to play Flash videos on your site and have links to play various different videos in your HTML code?

Here’s how to do it using the Flash player’s External Interface as a bridge between Javascript and Actionscript, which then uses the video.Maru API to switch videos.

Download source here, 1.2 megs with videos.

Delivery
Sky
Cossacks

Here’s what the Actionscript code looks like:

Take a look at the first line of code: System.security.allowDomain(’http://videomaru.com/’). You’ll have to edit that to make it work on your machine. And give the System.security docs a read if you have any problems. I got everything to work by just opening the .htm file locally but that’s not always the case. Sometimes the ExternalInterface doesn’t work unless you are using a hosted file. I’ve wasted many an hour trying to debug when forgetting that little nugget.

And this is all there is to the Javascript:

A video.Maru user came to me with the following question:

How can I display the duration of a video in the linkBTN when using XML to describe a list of videos to play?

There are two ways to do this: One, you could just add a duration tag to the XML along with all the other children of each video node. Then use the video.Maru API to give you the XML and then manually run through each node and apply the value to the appropriate linkBTN.

Note: you can add any tag you wish to the XML: rating, color, viewedCount, whatever. But video.Maru doesn’t know what to do with that data. It doesn’t even look at it. So you’ll have to do that on your own with the API.

I’ve added a few calls to the video.Maru API to help with looping through the linkBTNs.

function getLinkButtonArray():Array
This will return a list of all the linkBTNs that were created from the XML. You’ll need to call this function from inside videoMaruCreationComplete. With this you will have a way to loop through this array and say something like:

In the above function I already have an array of the durations of all the videos - durationsArray. The linkArray contains a reference to each linkBTN. And inside each linkBTN I’ve added a TextField named duration. Here I’m just giving it a text value.

You’ll also notice that I’m using another new API call: videoMaru.formatTime.

function formatTime( s:String ):String
This takes a string that is the number of seconds in the video. If a video has a duration MetaData then it’s in seconds. But you don’t want to tell your users that a video is 175 seconds long. You’d rather tell them that it’s 2:55. That’s what this function does. It returns a string that is properly formated to display your video duration.

Let video.Maru do it for you

Now, if for some reason you can’t add the duration tag to your XML yourself you could have video.Maru do all this for you. With a little help from the API. To get the metaData from a FLV file you need to play it. No way around that. But you don’t have to play the whole thing. Just a tiny bit and you’ll have the metaData that you need.

So what you do is play each video in turn. As soon as the video returns the metaData, via the API, you play the next video, rinse and repeat until done. At each step you store the duration value from the metaData. Then when you’re done you can apply the data you have to each linkBTN as shown in the first case.

Here’s the code that will do that for you:

The downside to all that is the videos flash across the videoWindow as you loop through each video. There are two solutions that I can think of: one, place an image over the videoWindow and then remove it when you are finished looping through all the videos. Note: you will need to place the videoWindow inside a holder clip so that it doesn’t end up on top of your image at runtime.

The second solution is to have two entirely separate versions of video.Maru running. One for your users to see and the other, off stage, for getting the duration data. When you finish looping through all the videos you simply set video.Maru to playing a non-existent video, such as “”. Then you apply the steps from above. It’s all a matter of targeting the correct MovieClips. I’ll leave that as an exercise for the reader.

You’ll need the latest version of the video.Maru SWC to access these new API calls.

Enjoy.

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.