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.

I know next to nothing about forums. Never really used them that much. But I’m hoping that adding forums to this blog will help the community support each other using videoMaru while I concentrate on adding features.

The main reason I added forums is because there has been an issue with videoMaru playing youTube vidoes. A few users have told me that they have solutions using PHP scripts to fix this problem. However, I don’t know much about PHP.

Therefore the first forum topic is about, wait for it, Using PHP and videoMaru together to display youTube videos. Together we can end this destructive conflict and bring order to the galaxy.

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 ]

If you want to display large videos in your website you have two options:

1. Increasing the dimensions of the video encoding - width/height - and making a corresponding increase in your data rate to maintain playback quality, or
2. Keeping the encoded dimensions/data rate small and enlarging the width/height of the video at runtime on the client.

The downside to option one is that you use up more bandwidth on your server and the client must be able to accept the data rate you are sending to them.

The downside to option 2 is that the video quality decreases and it places more of a load on your clients machine to do the scaling.

I did some tests on my old Dell laptop. First with a small video - specks below - to see the results of runtime scaling and smoothing.

Video encoding settings for small video below

• Video: 400kb/sec,
• Dimensions: 320×173
• Audio: 96kb/sec
• Keyframe: auto
• Framerate: 30 ( same as source )

( I found that the best way to compare is to start the top video and then the bottom one about 3 seconds later. )

Notice that you can toggle the smoothing and video size.

Large video encoded at 640×346 and 1600bits/sec.

The bottom is encoded at 2x the size of the top one so that we don’t have to scale it - same as source dimensions. The settings are all the same except that I bumped the bits/sec on the video to max out at 1600. That’s because this video has 4x the pixels of the small version. There’s no good way to adjust the data rate but this is an upper bound. I doubt that the bits/sec ever came close to this value. Just as the small version never came close to400kbs.

Here are screen captures of my CPU usage for each of the tests:

Note: I waited for the video to completely download before playing.

From the CPUs standpoint the usage was pretty much the same between viewing a video at it’s native size of 640×346 with the smoothing off verses a video encoded at half the size and then stretched by a factor of 2 by the client and smoothing turned on.

You can compare the two videos and see what the quality looks like. If you have both running at the same time you can see that the bottom version - without scaling - is clearly superior in quality. But is the bandwidth savings worth it? You’re call.

I’d be interested in reading what you think.

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.