flash & html5 video in imovie

While I usually discuss politics on this blog, I thought it would be worthwhile to switch gears and talk TECH.  Many of you may not know but although I’m legally trained and politically motivated, I work in the field of in e-commerce at a grain & ethanol company here in Toledo.  Recently I undertook a project to transform a flash (*.flv) video site into an iPod/iPhone-comaptible site that would work on both mobile devices and remain backwards compliant with flash plugins in older browsers… using iMovie.  I’m happy to say I’ve found a solution that not only works… but works at file-sizes much lower than the “default” *.m4v files.   Specifically, this is a solution for creating an iphone-friendly video using the h.264 video codec inside a mp4 “wrapper”… using iMovie (and one other program, as you will see).

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.