I made a video tutorial that covers how to install Flash Media Server 3 and get it set up to stream videos and even record video from a webcam to your hard drive. You can view it over on polyGeek.com.

If you would like your navigation to be laid out as a grid of icons you’ll have to do a little work yourself. vidoeMaru can do rows, or columns for the navigation but not both. But the process is pretty easy and this example should be all you need to create your own or modify for your own purposes.

Even though videoMaru won’t do the icon grid for you it will still do most of the work. It will load and parse your XML and it makes it easy to load the icons. Plus, the scroll controls still work for the navigation even though videoMaru didn’t build anything itself. I actually didn’t think the scroll controls would work but I tried it as an afterthought and sure enough. So yeah for videoMaru.

If you would like to use this example the code is pretty well commented. It shouldn’t be difficult to modify it to suit your needs.

Note: if you use this any code from this example your are bound by law to add “polyGeek forever” on your gravestone.

@Joonas, you happy now?

Here is a short - 6 minute - video tutorial to help you create rollovers effects for your video interface controls.

[ Download Example | Download FLV ]

If you want to use the new API call - playBackward() - mentioned in this video you’ll need the latest videoMaru 3.5 beta SWC - see link at top of window.

playBackward( mc ) works be taking the MovieClip that you pass and creating an onEnterFrame function. On each enterFrame event it says: gotoAndStop( this._currentframe - 1 );

Then it checks to see if this._currentframe == 1. If so then it deletes the onEnterFrame function.

It looks like this:

function playBackward( mc:MovieClip ):Void { mc.onEnterFrame = function():Void {

 	this.gotoAndStop( this._currentframe - 1 );

		if( this._currentframe == 1 ) {

 		delete this.onEnterFrame;

 	}

    }

}

The startPlay button has gotten a major update. When you use it it not only pauses the video playback but it also stops the NetStream. Meaning that there is no video downloading until the user begins playback.

That comes in very hand here on my blog where I have multiple videos on the homepage at any given time. I don’t want to needlessly have those videos downloading if the user isn’t going to watch all of them. And that takes a huge burden off my server.

Here’s an example. Watch for the download progressBar closely when you click play. You should see it grow quickly even though the video has been sitting there for a few minutes.

Here’s how it works. For progressive streaming once the NetStream starts downloading a function runs that takes a Bitmap snapshot of the current frame visible in the videoWindow. Then it kills the NetStream so that no more downloading can occur. If everything has worked correctly the user will never know because they will still see one of the first few frames of the video sitting there.

Sometimes the Bitmap snapshot happens before any video is rendered so the user would see a blank screen. I’m working on that.

When the user starts playback the NetStream is recreated and downloading begins.

This should work with RTMP streams as well but there might be a few bugs. And it doesn’t apply to MP3s at all.

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.

If you would like to provide a visual display of the percentage of the video file that has been downloaded then use the downloadProgress MovieClip. It will be automatically centered placed at the same location as the timeLine and will be stretched to become the same width as the timeLine when the video has completed downloading.Here’s an example of it in action: ( download example FLA )

A few things to know:

• I would suggest using a rectangle - any width - as the shape inside the downloadProgress MovieClip. It will stretch as much as needed without pixelizing.
• Don’t use a stroke on the shape. It will deform in the corners and doesn’t look good.
• The registration point should be x=0 and y = something near 0. You may have to move the shape up or down inside the MovieClip to adjust it’s vertical placement over the timeLine. The video.Maru code will vertically center the downloadProgess bar over the timeLine. Depending on your design it may not end up where you want it.