HTML 5 Video Tag with Flash fallback..

   1: <video id="movie" width="320" height="240" preload controls> 

   2: <source src="pr6.mp4" /> 

   3: <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' /> 

   4: <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' /> 

   5: <object width="320" height="240" type="application/x-shockwave-flash" 

   6: data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> 

   7: <param name="allowfullscreen" value="true" /> 

   8: <param name="flashvars" value='config={"clip": {"url": 

   9: "http://wearehugh.com/dih5/good/bbb_480p.mp4", "autoPlay":false, "autoBuffering":true}}' /> 

  10: <p>Download video as <a href="pr6.mp4">MP4</a>, 

  11: <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p> 

  12: </object> 

  13: </video> 

  14: <script> var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } 

  15: else { v.pause(); } }); 

  16: </script> 

HTML 5 Video Tag with Silverlight fallback..

   1: <video height="575px" width="920px" poster="http://uxmagic.com/mythumbnailimage.png" controls onerror="fallback(this)"> 

   2:                  <source src="http://uxmagic.com/videoslfallback/silverlight.mp4"> 

   3:                 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="920" height="575"> 

   4:                     <param name="source" value="http://uxmagic.com/scripts/MyVideoPlayer.xap?v=3.1" /> 

   5:                     <param name="initParams" value="deferredLoad=true,m=http://uxmagic.com/videoslfallback/silverlight.mp4,autostart=false,autohide=true,thumbnail=http://uxmagic.com/mythumbnailimage.png" /> 

   6:                     <param name="background" value="#00FFFF" /> 

   7:                     <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"> 

   8:                         <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> 

   9:                     </a> 

  10:                 </object> 

  11:             </video> 

Firefox

Firefox may start playing your video element automatically forcing you to disable it through code.. How’s that for a consistent cross-platform experience..

   1: // ==UserScript== // 

   2: @name Disable video autoplay // 

   3: @namespace http://diveintomark.org/projects/greasemonkey/ // 

   4: @description Ensures that HTML5 video elements do not autoplay // 

   5: @include * // ==/UserScript== var arVideos = document.getElementsByTagName('video'); for (var i = arVideos.length - 1; i >= 0; i--) { var elmVideo = arVideos[i]; 

   6: elmVideo.autoplay = false; }

 So much for standards..

What’s even more frightening is codec support for playing across devices.. Remember though this is the future, the HTML community even with HTML 5 hasn’t fixed problem with different browser makers interpreting the same tags differently.. And Microsoft says this is what it wants for it’s true cross platform standards.. Seriously now, did anyone in management bother to check if everyone else read the same documents the same way.. Even with the HTML 5 document object model we are still having the different browser makers not be able to pervasively support the same standards..

Using MIME types to playback video using a supported codec on different platforms

   1: <video width="320" height="240" controls> 

   2: <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 

   3: <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> 

   4: <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> 

   5: </video>

Wait why do we have multiple source files specified with different encodings here ?

It’s a combination of three pieces of information: the container format, the video codec, and the audio codec,

To support these different video formats MIME types are employed and must be present on your web services mime type lists.

Why is this necessary ?

To support video we will need to support the different video types that are pervasive on different devices..

Safe Bets for right now..

• Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container. Firefox 4 also supports WebM.
• Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 also supports WebM.
• Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg container. It also supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container. Google Chrome 6.0 also supports WebM.
• Safari on Macs and Windows PCs will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plugins. In practice, few users are going to do that. So you’re left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include WebM, Theora, Vorbis, or the Ogg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.
• Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.
• Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
• Internet Explorer 9 will support some profiles of H.264 video and AAC audio in an MP4 container.

Problems with Video on Apple iPhone

• iOS does not recognize the video if you include a poster attribute. The poster attribute of the <video>  element allows you to display a custom image while the video is loading, or until the user presses “play.” This bug is fixed in iOS 4.0, but it will be some time before users upgrade.
• If you have multiple <source> elements, iOS will not recognize anything but the first one. iOS devices only support H.264+AAC+MP4, this effectively means you must always list your MP4 first. This bug is also fixed in iOS 4.0. This will affect your ordering of sources in my multiple source example code above.

Problems with Video on Google Android

1. The type  attribute on <source> elements confuses Android greatly. The only way to get it to recognize a video source is, ironically, to omit the type attribute altogether and ensure that your H.264+AAC+MP4 video file’s name ends with an .MP4  extension. This does not appear to affect any other browser’s ability to detect support for the video; in the absence of a type attribute, other browsers appear to guess based on file extension as well. You can still include the type attribute on your other video sources, since H.264 is the only video format that Android devices support at the moment.
2. The controls attribute is not supported. You will need to provide your own user interface controls. You need to provide a script that starts playing the video when the user clicks the video.

H.264 Licensing Fees

MPEG LA splits the H.264 licensing into two sublicenses:

• one for manufacturers of encoders or decoders
• another for distributors of content.

The sublicense on the distribution side gets further split to four subcategories, two of which (subscription and title-by-title purchase or paid use) are tied to whether the end user pays directly for video services, and two of which (“free” television and internet broadcast) are tied to remuneration from sources other than the end viewer.

The licensing fee for “free” television is based on  two royalty options.

• a one-time payment of $2,500 per AVC transmission encoder, which covers one AVC encoder “used by or on behalf of a Licensee in transmitting AVC video to the End User,” who will decode and view it.
• A license fee has already been charged to the encoder manufacturer, and the broadcaster will in turn pay one of the two royalty options.
• The second licensing fee is an annual broadcast fee broken down by viewership:
• $2,500 per calendar year per broadcast markets of 100,000–499,999 television households
• $5,000 per calendar year per broadcast market of 500,000–999,999 television households
• $10,000 per calendar year per broadcast market of 1,000,000 or more television households

Internet Encoding/Decoding of Video

MPEG-LA recently announced that internet streaming would not be charged for however. \H.264 is not royalty-free for all users. In particular, encoders ( example: uploaded video to YouTube processed by their system) and decoders (like the one included in the Google Chrome browser) are still subject to fees.