HTML and CSS Reference
In-Depth Information
Remember that the contents of the <video> element can contain
markup, like the text and links in the previous example? Here,
we'll place an entire Flash video player movie into the fallback
content instead (and of course, we'll also provide fallback for
those poor users who don't even have that installed). Luckily,
we don't need to encode our video in yet another format like
FLV (Flash's own legacy video container); because Flash (since
version 9) can load MP4 files as external resources, you can
simply point your custom Flash video player movie to the MP4
file. This combination should give you a solid workaround for
Internet Explorer 8 and older versions of other browsers. You
won't be able to do all the crazy video manipulation stuff we'll
see later in this chapter, but at least your users will still get to
see your video.
The code for this is as hideous as you'd expect for a transitional
hack, but it works anywhere that Flash Player is installed—which
is almost everywhere. You can see this nifty technique in an
article called “Video for Everybody!” by its inventor, Kroc Camen
( http://camendesign.com/code/video_for_everybody ) .
Alternatively, you could host the fallback content on a video
hosting site and embed a link to that between the tags of a
video element:
<video controls>
NoTE The content
between the tags is fall-
back content only for browsers
that do not support the
<video> element at all. A
browser that understands
HTML5 video but can't play any
of the formats that your code
points to will not display the
“fallback” content between the
tags, but present the user with a
broken video control instead.
This has bitten me on the bot-
tom a few times. Sadly, there is
no video record of that.
<source src=leverage-a-synergy.mp4 type='video/mp4;
¬ codecs=”avc1.42E01E, mp4a.40.2”'>
<source src=leverage-a-synergy.webm type='video/webm;
¬ codecs=”vp8, vorbis”'>
<embed src=”http://www.youtube.com/v/cmtcc94Tv3A&hl=
¬ en_GB&fs=1&rel=0” type=”application/x-shockwave-flash”
¬ allowscriptaccess=”always” allowfullscreen=”true”
¬ width=”425” height=”344”>
</video>
Yo u c a n u s e t h e H T M L 5 M e d i a L i b r a r y ( http://html5media.info )
to hijack the <video> element and automatically add necessary
fallback by adding one line of JavaScript in the page header.
 
Search WWH ::




Custom Search