HTML and CSS Reference
In-Depth Information
From these graphs, I think you can clearly see that Google Chrome is the most robust feature-rich browser when
it comes to HTML5 video codec support. However, most of your clients will want to reach across all browsers when
using HTML5 video, and while the support for the HTML5 video element is almost 100 percent, the video
codec/format that fills that element is still quite fragmented, which requires you to develop to all of those formats for
cross-browser penetration. Yes, it's a very time-consuming process indeed.
To support both HTML5-compliant browsers and older ones, it's recommended that you use browser and device
detection and degrade gracefully to an alternative video experience, such as a Flash failover by including either an
embed or object tag within your video element, as outlined here:
<video controls height='640' width='360'>
<source src='yourVideo.mp4' type='video/mp4' />
<source src='yourVideo.webm' type='video/webm' />
<! -- Flash Code Here -->
<embed src='yourVideo.flv' width='640' height='360' quality='high' type='application/x-
By including the Flash failover code in the video tag, the browser will omit the video tag if it does not recognize
it and use the Flash code. Conversely, browsers that support the video element will not render the portion within the
video tag, in this case the Flash embed code.
Alpha Support
Alpha video is the transparent portion of the video. Typically a video will be shot on top of a green or blue screen
and later keyed in postproduction, which is the removal of the green or blue background elements. After the key is
done, the video is then exported to a video codec and format that supports the alpha transparency information. This
is common in video that overlays page content or provides a seamless integration between ad video content and
publisher page content. Figure 7-10 shows the codec “animation” in Apple's QuickTime (QT) 7 Pro and the setting of
millions+, which stands for millions of colors; plus, the alpha information is preserved in the video. If you're getting
a video file from your client or agency, it's best to test your video by opening it using Apple's QuickTime and press
Command+I for Mac or Control+I for Windows, which will open the QT inspector panel.
Search WWH ::

Custom Search