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-
shockwave-flash'></embed>
</video>
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.