HTML and CSS Reference
In-Depth Information
Listing 5-6.
The
video
element with fallbacks for less capable browsers
<video controls width="468" height="350" poster="images/mechanical-monsters.jpg">
<source src="video/mechanical-monsters.webm" type="video/webm">
<source src="video/mechanical-monsters.ogv" type="video/ogg">
<source src="video/mechanical-monsters.mp4" type="video/mp4">
<object data="flash/video-player.swf" type="application/x-shockwave-flash"
width="468" height="350">
<param name="flashvars" value="file=video/mechanical-monsters.mp4">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<img src="images/mechanical-monsters.jpg" alt="">
<p>Download this exciting video clip in
<a href="video/mechanical-monsters.webm">WebM</a>,
<a href="video/mechanical-monsters.ogv">Ogg Theora</a> or
<a href="video/mechanical-monsters.mp4">MP4</a> format.</p>
</object>
</video>
Required Attributes
The
video
element doesn't require any attributes, though it should carry a
src
attribute if it doesn't contain
any
source
elements. If one or more child
source
elements are present, you should omit the
src
attribute
from the
video
element. A
video
element with no attributes is technically valid, but it won't do anything
without a media source. Even with no media source, the element still exists in the document and
JavaScript can manipulate the object (dynamically adding a source, for instance).
Optional Attributes
src
: Specifies the URL where the video file or stream resides on a web server.
poster
: The URL of a placeholder image to display before the video is played. Without a
specified poster image, browsers display the first frame of the video.
controls
: A Boolean attribute that, when present, invokes the browser's standard player
interface, typically including a play/pause button, volume control, a seek bar with a position
indicator, and the media length or time remaining
width
: The width of the video in pixels.
height
: The height of the video in pixels.
preload
: Suggests to a browser that it may preload the video data before a user initiates
playback. The attribute accepts the values
auto
(the user-agent, depending on its settings, can
preload the audio; this is the default),
metadata
(load only the audio file's metadata, such as title,
artist, length, etc.), or
none
(don't preload any data). The attribute with an empty value is
equivalent to
auto
.
