HTML and CSS Reference
In-Depth Information
Using the
<object>
Tag with the
<video>
Tag
The
<object>
tag can be used as an alternative for presenting video for browsers like
Internet Explorer that don't support the
<video>
tag. All that you need to do is included
a proper
<object>
tag inside your
<video>
tag. The way HTML support works in
browsers ensures that this works. Browsers ignore tags that they don't recognize, so
Internet Explorer will ignore your
<video>
tag. Browsers that do support the
<video>
tag
will ignore any
<object>
tags that are nested within them, recognizing that they are
included as an alternative means of presenting the video.
So when you use them together, you wind up with markup that looks like this:
<video width=”320” height=”240” controls>
<source src=”path/to/movie.mp4”
type='video/mp4; codecs=”avc1.42E01E, mp4a.40.2”'>
<source src=”path/to/movie.ogv”
type='video/ogg; codecs=”theora, vorbis”'>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” ?
width=”320” height=”240”>
<param name=”movie” value=”/movie.mp4”> ?
</object>
</video>
The
<video>
tag with its
<source>
elements will present video in browsers that support
it, and for those that don't, the
<object>
element is included to present the video using
Flash.
You can even further nest tags, including the
<object>
tags used by both Internet
Explorer and other browsers as children of the
<video>
tag:
<video width=”320” height=”240” controls>
<source src=”path/to/movie.mp4”
type='video/mp4; codecs=”avc1.42E01E, mp4a.40.2”'>
<source src=”path/to/movie.ogv”
type='video/ogg; codecs=”theora, vorbis”'>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” ?
width=”320” height=”240”>
<param name=”movie” value=”/movie.mp4”> ?
<object type=”application/x-shockwave-flash” data=”myContent.swf”
width=”780” height=”420”>
<p>
You need the Flash player to view this page.
<a href=”http://get.adobe.com/flashplayer/>
Get Flash.
</a></p>
</object>
</object>
</video>
In this case, browsers that support the native
<video>
tag will use it. Then, Internet
Explorer will use the nested
<object>
tag, and finally other browsers will use the inner
<object>
tag.
