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 ]

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.

Adding captions to online video is becoming a hot topic. If you are a designer/developer working on a video interface and are requested to add captioning then you have to figure out a way that ties the playback of the video to an external file - probably XML - that describes when and for how long a caption should be displayed.

It isn’t a trivial problem.

So when I was updating video.Maru to version 2.0 I made sure that I made it just as easy to add closed captions to your video interface as it is to create the interface with video.Maru in the first place.

Watch a video tutorial covering how to use captions with video.Maru.

The XML documentation is broken up into two sections. Those attributes associated with the <video> nodes and those attributes associated with the <settings /> node.

Note: the capitalization of these attributes does matter. As opposed to the instance names of the elements of the video interface which do not.

<video>

path=”path/fileName.flv”
The path to the FLV that you would like to play. This can be a relative path to an FLV on the same server or a full HTTP address. If you would like to stream a video for youTube use: youtube=IDnumber.

captions=”path/fileName.xml”
The path to the captions data, if any. The data in this XML file will populate the captions TextField based on the time indexing.

videoTitle=”text goes in the videoTitle TextField”
Text that will populate the videoTitle TextField.

iconSrc=”path/fileName.png”
The path to the graphic that you would like to display in the linkIcon inside the linkBTN that is attached at runtime.

iconWidth=”number”
iconHeight=”number”
Override the intrinsic width/height of the graphic loaded into the linkIcon.

autoPlayNext=”true/false”
Automatically starts playing the next video. If currently playing the last video it will wrap around and begin playing the first video.

showStartPlay=”true/false” ( video.Maru 3.0 addition )
Display the startPlay MovieClip. Autoplay must be set to false for this to work. And the startPlay MovieClip must have been on the stage at authoring time.

loopVideo=”true/false”
Play the current video again.

autoPlayVideo=”true/false”
Determines if the video should be playing - true - or paused - false - on startup

btnX=”number”
btnY=”number”
The x,y coordinates of the associated linkBTN for this video node. The position will be from the registration of the _parent MovieClip or, if it exists, the linkBTNholder.

If you only supply the btnX, btnY value for the first <video> node then all the other buttons will stack vertically with a gap of 2 pixels between each.

linkText=”Text on the linkBTN”
The text that goes on the associated linkBTN.

description
The description is not an attribute. It is the value of the node. The text should be placed between the <video>description text</video> tags.

If you want to display HTML code in the description TextField then use CDATA, as such: <![CDATA[<b>description</b> of the video that goes in the description TextField]]>
description

<settings/>

buttonsX=”number”
Set the x-coordinate for all the linkBTNs.

buttonsY=”number”
Set the y-coordinate for all the linkBTNs.

prevButtonX=”number”
prevButtonY=”number”
The x,y coordinate of the prev button when it is attached at runtime. If no value is given then it will stack under the last linkBTN.

nextButtonX=”number”
nextButtonY=”number”
The x,y coordinate of the next button when it is attached at runtime. If no value is given then it will be placed at the same y-value and just to the right of the prev button.

verticalButtonPadding=”number”
The number of pixels between the linkBTNs if they are stacked vertically.

horizontalButtonPadding=”number”
The number of pixels between the linkBTNs if they are placed horizontally.

Below is a sample XML with all of the available attributes.

If you liked the first video tutorial on XML with video.Maru then you’re gonna love this one.

Note: this takes off where the previous page/tutorial - XML Basics - left off.

If you would like to spruce up your linkIcon with a little icon or thumbnail of the video then you can add a MovieClip to your linkBTN with an instance name of linkIcon. To describe the image/swf to load into that linkIcon go over to your XML and add an attribute to the video node in question like this: iconsrc=”folder/path.png”

That image/swf will then get loaded into the corresponding linkBTN. The size element that gets loaded will default to it’s native size. If you would like to resize it then add the attributes: iconWidth/iconHeight to the node in question.

You’ll notice that the loaded element is always centered inside the linkIcon MovieClip.

Titles and descriptions

video.Maru makes it very easy to display the title of the video and also a description of the currently playing video. Simply create a TextField with an instance name of videoTitle and then add a corresponding attribute to the <video> node in the XML of videoTitle=”someString”.

The description works just the same except the value in the XML for that TextField is the value of the corresponding <video> node. Below is an example of how that works.

Notice that the second node value uses CDATA. That’s a special way of embedding HTML code inside of XML. You can use any of the standard HTML tags that the Flash TextFields support.

This is just an overview of some of the XML support in video.Maru. Check out the complete XML documentation page for all the details.

Watch video tutorial on XML basics with video.Maru 2.0

The XML support in video.Maru is extensive and supports many options. Fortunately most cases will only need to use the basics of XML support.

If you want to enable your users to select from a series of videos, much like you would with using videoLink MovieClips, but you want the list to be dynamic, or at least external to the FLA, then XML is the way to go.

Start by pointing the videoWindow at your XML file, just as you would an FLV. That will cue the video.Maru code to load and parse the XML for use. The XML file can be named anything you wish. What’s important is to get the nodes and attributes correct.

Basic XML structure

That by itself will work.

If all you wanted to do was play a series of videos, one after another you could list them as such:

That would play through those three videos, or more if you added nodes, one after another. It would then loop back to the first video and start over - unless you removed the autoPlayNext=”true” from the last node. Then it would end on the third video.

If you would like video.Maru to create links, like the videoLinks MovieClips, for each FLV in your XML file then you will have to create a MovieClip that is the shell of a button and then give it a Linkage Identifier and export it for Actionscript. Here’s the details.

Create a MovieClip. Inside the MovieClip there should be a dynamic TextField with an instance name of link. There is a corresponding XML attribute named linkText that will populate that field.

In the Library right-click on the MovieClip you just created and select the checkbox Export for Actionscript. The Identifier must be linkBTN.

(Note: you do not need to have this MovieClip on the stage. The video.Maru code will attach this MovieClip at Runtime.)

You can also include an icon in your linkBTN. To do so create a MovieClip inside your linkBTN with an instance name of linkIcon. The corresponding XML attribute is iconsrc=”folder/fileName.png”. The icon can be a .jpg, .gif, .png or .swf.

The icon will be placed at the same x,y coordinates as the linkIcon MovieClip. However, the size of the icon will be whatever size the image or swf happens to be. If you would like to override the native size of the icon then add the iconWidth=”value” and iconHeight=”value” attributes.

Now you will want to describe how video.Maru should place these buttons in your video interface. There are many options for this. The easiest is to give each button an (x,y) coordinate. To do that add the attributes btnX=”value” and btnY=”value”. You would do that for each node.

So far an XML node with everything covered up to now would look like this:

But wait, there’s more

The main problem with placing the linkBTNs with the btnX, btnY combination is that if you want to place them somewhere else you’ll have to update all these attributes. Or if you changed the height of the linkBTNs they may start to overlap. Fortunately there are solutions for these issues.

You can create a <settings> node in the XML to describe how to layout your buttons. So if you wanted to create a vertical stack of buttons, all with the same x_position and a 4 pixel gap between each linkBTN then you would have XML as such:

This will place all your buttons 10 pixels from the left edge of the Stage and stack them with a 4 pixel gap.

I know what you’re saying, “That great but it’s hard to design a video layout when I can’t see where my buttons are going to be until I publish the movie. That’s where the linkBTNholder MovieClip comes in.

If you create a MovieClip with the instance name linkBTNholder then your linkBTNs will be placed inside of that MovieClip. Now you can just move your linkBTNholder around in the authoring tool as you wish. Don’t forget to change the buttonsX=”num” in the <settings> node. That attribute still works but now it places the buttons 10 pixels from the left edge of the linkBTNholder MovieClip.

What’s next, or previous?

Just like the videoLink buttons the linkBTNs support the next and prev buttons. First, you have to create your buttons just like you did with the linkBTN. You’ll need to enable the Export for Actionscript for the next and previous buttons and their Linkage Identifiers are nextBTN and prevBTN.

In the <settings> node you can add attributes to describe where the buttons should be placed. If you wanted to place the prevBTN 200 pixels from left and 300 pixels from the top, and have your nextBTN 50 pixels to the right, then your XML would look like this:

Going Deep

You’ll also want to take a look at the deepLink functionality if you want to start playing a video other than the the one in the first node.

The whole story

Take a look at the XML documentation to get a complete list of all the functionality and attributes.

Watch a video tutorial covering how to use captions with video.Maru.

Download Source files for captions example

video.Maru makes it very easy to add captions to your videos. Simply create a TextField with an instance name of captions. Then make the text value of the TextField the path to your XML file. The image below shows an example.

Caption XML format

The XML format for the caption data is easy. You can set the attributes for hour, min, sec, and duration for each caption. And then the text that you would like to display as the caption - which can be HTML formated text. That’s about it.

Below is a code sample.

Here’s the code used for the captions in the video below.

If you integrating video.Maru with XML to display a series of videos and you would like to display captions then just add a captions=”path-2-file.xml” attribute to the nodes where you want to display captions. That’s about it.