Distributing a video product can be very simple. I just shoot a video with my iPhone. Touch the share button. Touch the ‘Send to YouTube’ button and I’m done.
But if one wishes to produce a regular video program or include video elements in one’s web page or blog then distribute it to the general public things start to get a little more tricky. My wife has a Droid Eris which runs on Android. You may have an old version of Internet Explorer. (Please tell me you don’t.) Some of you have Macs which choke on about 75% of the web’s videos because they are in Flash. On top of everything else, like the iPhone, the new iPad won’t be able to handle Flash at all. We could choose to curse the darkness (you fill in who you would blame), but it is dark so we need to light a candle if our web media is going to continue to be relevant into the future.
In addition to the variety of operating systems or hardware one might have, there are many different browsers one might use. Oh, and there is a change in the HTML standard with regard to video coming down the pike as well. In anticipation, HTML5 has already been implemented in some form or another in most contemporary browsers.
An extra challenge in making video forward compatible is that the HTML5 <video> tag standard codecs have not been determined. Two top contenders are OGG and H.264. OGG has no patents but it is performance deficient. H.264/MPEG-4 AVC has patents but is easily licensed (for a price) and is backed by Apple. I plan to kill the iPod-iPhone best-bet-on-forward-compatibility birds with the H.264 video, up to 1.5 Mbps, 640 x 480, 30 frames per sec., Low-Complexity version of the Baseline Profile with AAC-LC audio up to 160 kbps, 48 Khz, stereo audio in the ‘mp4’ container (per Apple). Both Handbrake and FormatFactory can do this . Lifehacker reports: “In terms of HTML5 and video, Opera has gone the way of Firefox, supporting native, Flash-free streams of the Ogg Theora format, but not H.264. Apple’s Safari supports only H.264, and Google Chrome supports both.” Mozilla has posted explicit directions for how to make media available for all browsers. Unfortunately, somebody needs to write the java script to generate the player. Sublime video is working on this and has a prototype up at their website. They promise to provide it free for noncommercial use.
The question remains what can one do today? The good news is that if your OS-Browser combo (henceforth to be referred to as your client) can’t play the provided HTML5 video it ignores it. So, I will be providing code for HTML5 video in all cases.
Modifiers for the video tag include controls, preload, and autoplay. The default is not to autoplay so you can leave that out if you just want the video to start loading without playing. Preload=”none” is the default and does not need to be included . Here are a couple of examples from Video for Everybody. The controls inherent to HTML5 (not modified with java script) are basic and don’t allow for moving to full screen. Fortunately, some browsers (thank you Firefox) make this available in the right-click menu. The video will only be as big as will fit in the space provided by the width and height modifiers.
<video width=”320″ height=”240″ controls preload autoplay>
<video width=”320″ height=”240″ controls preload=”none”>
But remember that the source video format depends on the client. The iPhone is even limited as to what the maximum resolution it can play will be. The approach that seems to be evolving on the web is to use the multiple source option for HTML5 video. The browser simply plays the first source that is compatible and ignores the others. Modifiers for the source include specifying the video and audio codecs and/or the container type. An example of using just the container type is given by Video for Everybody (VfE). Here the first is for Firefox, Chrome, and Opera and the second allows the iPhone, iPad, Mac crowd to play and the last lets the non-‘mov’ browser play video in the ‘mp4’ container. I did not test this.
<source src=”video.ogv” type=”video/ogg”></source>
<source src=”video.mov” type=”video/mp4″></source>
<source src=”video-desktop.mp4″ type=”video/mp4″></source>
Video on the Web posts most of the parameters related to <source>. Here is their example of two video files with the optional container type and codecs specified. This speeds how quickly the client can reject an unplayable format which speeds load time:
<video width=”320″ height=”240″ controls>
<source src=”NewOrleans2006.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
<source src=”NewOrleans2006.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘></video>
But wouldn’t it be nice to offer Flash with its ability to go full screen with just a user click to those clients capable of doing so? (Please don’t rant about the security issues with Flash unless you are one of the few pure ones who live outside of the influence of YouTube, okay?) There appears to have been a lot of attention given to providing Flash as a last resort. This process is described as “degrading” to Flash. The filter works something like this. If the client has a browser (Firefox, Chrome, and Opera) that can handle OGG, it plays the first source and skips everything else within the video tags. If it is a Mac, iPhone, or iPad, it skips the first source and lands on a second source in a ‘mov’ container. If the client is an iPhone or iPod it could play an alternate second source generated using QuickTime Pro. I’m lazy so I’m just going to have on H.264 source small enough that both Mac and iPhone (and presumably iPad) users can share. If one is watching on the web 640 px is plenty wide enough. If I didn’t have doubts about licensing issues I might reverse the OGG versus H.264 order. Finally, an object can be included within the video tags to provide ELSE actions if the client can’t play HTML5 video. In this scenario, the object is flash video. After studying the above sources, I adapted their code for my blog to illustrate their degradation algorithm using my own web host’s flash player. It starts OGG, then filters down to an iPhone file in a ‘mov’ container, then degrades to flash. Since I’m not doing the QuickTime Pro deal, I use the ‘mp4’ container instead of ‘mov’. Currently, this code has been demonstrated to degrade to flash on Internet Explorer 7. When using Opera 10.5, Chrome or Firefox, it plays the ogg file as HTML5 video. It switches to the ‘mov’ HTML5 only on the iPhone. My display is broken on my iBook so I didn’t test with that. My wife’s Eris also handles this well. The relevance of the lead in video is that it is written just like this. (It appears that Firefox 3.5 does not display the poster image, but Firefox 3.6 does. Otherwise the player seems the same.)
<video controls width=”560″ height=”402″ poster=”__Your_Full_Poster_Path__.jpg preload>
<source src=”__Your_Full_Video_Path__.ogv” type=”video/ogg”></source>
<source src=”__Your_Full_Video_Path__.mov” type=”video/mp4″></source>
<object width=”560″ height=”402″ type=”application/x-shockwave-flash”
data=”__Your_Flash_Players_Full_Path__.swf?image=__Your_Full_Poster_Path__.jpg&file=__Your_Full_Video_Path__.flv”> <param name=”movie” value=”__Your_Flash_Players_Full_Path__.swf?image=__Your_Full_Poster_Path__.jpg&file=__Your_Full_Video_Path__” />
<!– fallback image –>
<img src=”__Your_Full_Poster_Path__.jpg” width=”560″ height=”402″ alt=”__Your_Video_Title__” title=”No video playback capabilities” />
</object>
</video>
One little caveat for you WordPress posters. If you switch in the online editor from HTML to Visual view the editor will happily foul up all this wonderful code. Stay in HTML view till you publish and you’ll be just fine. We’ve only scratched the surface of this topic so here are some links to the places I went to to get to this point. Hope you find this all helpful.
Useful Resources:
Video on the Web
Video for Everybody
Sublime Video
Mozilla on HTML5
Lifehacker on Opera 10.5
arstechnica
