OT: MP4 video files in Flash Player - WOW!

Cliff Etzel wrote on 6/19/2008, 12:09 PM

I just completed my first encode using Vegas Pro 8 out to the Mainconcept MP4 codec to play via an embedded Flash player in Wordpress. I spec'd the file as follows:

Video

Once completed with the encode, I ran QTIndexSwapper to fix the MP4 file to play progressive in the flash player. I did a side by side comparison with On2 Flix Pro encoded at it's highest quality setting (1000Kbps local quality). The FLV version comes in at about 85MB for a 12 minute video, the MP4 file is slightly larger at about 92MB. But the difference in quality is night and day in favor of the MP4 version - and there is less system resources utilized to play the MP4 version in the Flash Player.

Once I figured out how simple it was to get the wordpress embedded Flash Player plugin to use the MP4 file, the rest was cake. This is definitely my new way of showing my portfolio content online. Only problem is the amount of bandwidth I'll end up using if I let too many people know about this 12 minute piece of video - may need to bump up my hosting plan to compensate for the increased bandwidth usage.

These are great times for web content distribution.

Cliff Etzel - Solo Video Journalist
bluprojekt | SoloVJ.com

Comments

prairiedogpics wrote on 6/19/2008, 1:47 PM

you should post an illustrated (screenshots) tutorial on your website for us technically challenged folk!

Tom Pauncz wrote on 6/19/2008, 3:22 PM

Hey Cliff,
Just went thru' the hoops of installing Adobe AIR and the swapper app, but cannot get my converted MP4 video to play in a flash player?

Could you please fill us in a little? I am not technically useless - just seems that way sometimes. :-(

Cheers,
Tom

Tom Pauncz wrote on 6/19/2008, 5:58 PM

You first need to install Adobe Air. Then when you dbl click on the .air file, it'll install itself. It did for me.
Tom

Cliff Etzel wrote on 6/19/2008, 9:01 PM

I'm going to write up a how to for solovj.com in the next couple of days - just need to find the time on top of the web projects I'm doing.

Cliff Etzel - Solo Video Journalist
bluprojekt | SoloVJ.com

Tom Pauncz wrote on 6/20/2008, 8:01 AM

Thanks for all your efforts Cliff.
Looking forward to tutorial.
Tom

Cliff Etzel wrote on 6/20/2008, 11:42 AM

Ok - The tutorial is now published online and hope it explains the process well enough.

Let me know what you guys think.

Cliff Etzel - Solo Video Journalist
bluprojekt | SoloVJ.com

Laurence wrote on 6/20/2008, 2:57 PM

I was looking around your site for examples of mp4 embedded as flash. Is the video about cancer and rowing an example of mp4 in a flash player?

Cliff Etzel wrote on 6/20/2008, 4:28 PM

I'm beginning to make the transition over for some of my work to this new way of doing video online - I just completed converting the Obama Rally Coverage Video I shot last month and is located on this page.

This was edited and rendered in Vegas Pro 8 using the Mainconcept MP4 video codec with QTIndexSwapper applied and then linked to work with the Flash Video Player plugin for Wordpress.

Cliff Etzel - Solo Video Journalist
bluprojekt | SoloVJ.com

prairiedogpics wrote on 6/20/2008, 6:16 PM

Excellent tutorial!
the only trouble I'm having is that the converted and embedded .flv file looks squashed compared to the straight rendered .mp4 file.

See the comparison:
http://www.flickr.com/photos/63092869@N00/2596802008/sizes/o/

Here's the relevant part of the code I used:

*************************
<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
var s1 = new SWFObject("mediaplayer.swf","mediaplayer","480","270", "8");
s1.addParam("allowfullscreen","true");
s1.addVariable("width","480");
s1.addVariable("height","270");
s1.addVariable("file","video.flv");
s1.write("container");
</script>
*******************

Why does the embedded aspect ratio differ?

Cliff Etzel wrote on 6/20/2008, 7:15 PM

I'm betting it has to do with the extra pixels for the play bar below in the Flash version.

I would try 480x290 or something similar and see if that looks better. It's not the video itself, only change to make would be to the dimensions of the player's height.

The wordpress plugin is based upon the same flash player, but when I poked around the plugins code, it automatically adds the additional pixels to compensate for the control bar.

Cliff Etzel - Solo Video Journalist
bluprojekt | SoloVJ.com

Tom Pauncz wrote on 6/20/2008, 9:02 PM

Hmmmm..

I have a different issue. Using the same code snippet, my MP4 file doesn't play. I have installed Adobe Air as well as the QT fixer upper and processed the MP4 file output by Vegas following your tutorial.

Here's my code...

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("mediaplayer.swf","mediaplayer","300","185","8");
s1.addParam("allowfullscreen","true");
s1.addVariable("width","300");
s1.addVariable("height","185");
s1.addVariable("file","Lightning(test)_qtp.mp4");
s1.write("container");
</script>

Can you spot anything obviously wrong?

Thanks very much Cliff,
Tom

Cliff Etzel wrote on 6/20/2008, 10:23 PM

I'm wondering if your file name "Lightning(test)_qtp.mp4" is causing an issue - specifically the parenthesis.

Are you testing locally or remotely? I always keep my file names all lowercase so try to remove the odd characters and change the name to all lowercase. If testing remotely, try an absolute URL to the file in your config as well to see if this might be a path statement issue.

Cliff Etzel - Solo Video Journalist
bluprojekt | SoloVJ.com

Tom Pauncz wrote on 6/21/2008, 8:17 AM

Cliff,
Very embarrassing - it was just a path issue to the file (testing locally). Parentheses don't matter. Saw it much clearer having slept on it. :-)
Now that I have the primitives sorted out, need to figure out how to use it to the best advantage. Thanks for the tutorial.
Cheers,
Tom

Houston Haynes wrote on 9/12/2008, 2:41 PM

I have QuickTime 7.5 Pro for windows - just curious if anyone has tried the "Export for Web" function and how that has behaved for them? Does it set the index for streaming - or is it just a straight-up data/size converter?

I don't mind putting QTIndexSwapper on my machine for this functions, but if I've already got something in the can that will do the trick, then I'm not going to mess with it.

TIA

Houston Haynes wrote on 9/12/2008, 8:44 PM

I think I just answered my own question - looks like the Export to Web function in QuickTime sets the index in the right position (at least as far as the error message in QTIndexSwapper tells me).