More tweaks are on the way… but things are coming along nicely.  Enjoy!

This tutorial assumes some familiarity with the <video> spec released in html5 and offers a solution to html5-friendly video that can be exported out of itunes and is simultaneously backwards compliant with Adobe flash –while remaining iphone friendly.

Early in my testing, it was apparent that the default *.m4v files, although compatible both with html5 and flash, resulted in files well over 30 mb; and for our customers (mostly farmers out in rural areas) this was an unacceptable solution.  We needed to keep our final videos around 8-10mb (as our current .flv files were) but still allow mobile streaming on an iphone.  As I began testing, I learned that imovie-created mp4 files were compatible in html5 web-browsers but not with an ipod touch/iphone.

After a few hours of testing, I discovered a solution:  If I tweaked the mp4 video settings and provided a more detailed codec declaration in my <video> tag… I could make the video compatible with both the desktop browser as well as the ipod browser.

Here is my codec solution for mp4 compatibility in both flash (for backwards compatibility) and html5 from itunes:

Quicktime Export > MP4 file format > H.264 codec > AAC-LC audio > AND!!!  under the Video Options button, select “Baseline” as your profile option.  Here are some screen-shots of the settings panels:

This is still only part of the solution:  putting this file in a “vanilla” <video><source> tag would render the file un-playable on an iphone/ipod.  In order for this file to work properly, one must specify the right codec in the <video> tag.  Here is an example snippet that works with the itunes export:

<video id=”movie” width=”460″ height=”259″ poster=”image.jpg” controls autobuffer>
<source src=”movie.mp4″ type=’video/mp4; codecs=”avc1.58A01E, mp4a.40.2″‘>
</source></video>

Note the <source> tag;  I have included both a “type” declaration as well as a codec declaration.  If the <video> tag does not contain these fields, your mp4 file will not play on an ipod or iphone.  I cannot emphasize this enough.  [for more reading on html5 video and audio codec declarations, click here]

However, I still encountered one major issue:  .mp4 movies created out of itunes do not “buffer” the same way .flv files do when loading inside of a flash player.  Instead of the progressive loading we are all used to, the file would not even appear in the flash player until the entire clip had loaded in the browser’s memory.  This was an unacceptable solution. After some research over at rakaz’z blog and macslocum I discovered that the mp4 has something called a “moov atom” feed that makes buffering in flash possible.  In iTunes, this atom file is located at the “end” of the *.mp4 file… and flash cannot take advantage of the buffering capability unless this feed is the first piece of data downloaded by flash.  Fortunately, Renaun Erickson over at Adobe has created a simply little AIR utility to fix this atom feed placement.I found a relatively painless solution to this problem: a program called “QTindexswapper”.  [download link].

Once you have selected your iMovie mp4 file and click the “Process” button, you should see a new .mp4 file that will buffer correctly in a flash player.

I would be interested in other solutions to this one… especially ones that simplify the process.  If you have any ideas, leave a comment.

———————————————

for more great reading on this topic, allow me to refer you to this post over at the Opera Blog.

Find out what YOU look like @ Personas | Metropath(ologies) | An installation by Aaron Zinman.

new jquery project, originally uploaded by jrossol.

so… havent’ been blogging in a while…. well… there is a GOOD REASON. Just finished teaching myself some basic jquery so I can be more marketable as a web developer. FUN STUFF.  Basically, I built an interactive library of ALL the music I own so people can take a look at what I like, read my reviews… etc.  I used a very powerful yet surprisingly simple-to-use javascript library called jquery, and also implemented some asynchronous database calls that populate the meta-data without requiring a page refresh.  It’s still a work in progress, but I’m excited about its potential.  I will continue to update it with more cd’s, better effects, and more of MY OWN reviews (not the stock Amazon filler that’s currently there).  I’m probably breaking some copyright by doing this but what the hey… FAIR USE!

Check it out @ http://www.blogstitution.com/CD/index.php.  Click on an album to see the effects.

*** YOU will NEED safari or Firefox 3… or else you will have rendering problems.

A while back, I picked up a MXL 992 microphone on a whim after stumbling across a blowout sale at musicians friend. Been trying it out for odd things here and there… and thought I’d contribute to the greater web community by giving them some sample audio.

At any rate, I’m proudly up on Amazon.com as well.

I think I should just start a podcast… I have the gear… maybe Pris and I should do a debate format. What do you think?

The Movie Preview Page

I must admit, this page baffles me.. on any number of levels. The thumbnail view is completely lacking in design and usability. Not only is its jet black background fundamentally out of place in the Itunes white/grey design scheme… but with your typical widescreen movie, you are limited to a preview image approximately 100 pixels long — hardly enough information to make out a face, much less serve any preview purpose.

To make matters worse, itunes insists on providing you unnecessary metadata for what is essentially a visual preview mode… without providing room to display most of the data it insists upon. If you look a the example screen-capture, you will see that most titles more then 20 characters long get cut off. This is especially true with the Stanford university video where nearly every piece of information in each content area.

What bothers me about these problems is that there is more then ample space in this view to display twice the information, with a much larger preview, but instead we get huge gaps of black background. Let’s do some quick math… with an average size window (800w x 600h)… you have an area of 480,000 square pixels. If each preview image is 100w x 50h (average approximation for DVD movies), and you only put 15 previews in this area (3 across, 5 down) , you end up using only 15% of the total useable space for preview purposes! (75000 [100*50*15] / 480,000). And this is IN PREVIEW MODE!

I would love to see a movie preview page that did movie previews well. In fact, I would prefer navigating my video library visually instead of textually but alas, Apple’s implementation just isn’t worth using. Apple, you can do better.

I have my issues with coverflow as well; but perhaps that is better saved for another post.

A few hours later… with some custom graphics, CSS, and PHP… I was able to get the information from the database to display nicely on the web. If you want to play around with the files/code…

download the files here…

• Click image for website