HTML and CSS Reference
In-Depth Information
<video controls poster=”ship-icon.png” width=”640” height=”360”>
<source src=”video/boatride.mp4” type=”video/mp4”>
<source src=”video/boatride.webm” type=”video/webm”>
<!-- fallback content here -->
</video>
The
<video>
element includes:
A
controls
attribute, which tells the browser to include the default controls
for the video. If you don't include this attribute, you can create your own
controls instead using the media elements API.
A
poster
attribute, which specifies the location of an image to use as a poster
to display before the video starts to play. If not included, this defaults to
the first frame of the video.
width
and
height
attributes to specify the width and height of the video.
These work similarly to those for
<img>
except that if you specify different
values to the video's intrinsic values, the video doesn't resize; instead, it
letterboxes.
The
<source>
attributes point to the video files you want to play. You can instead
put a single
src
attribute on the
<video>
element to just point to one video file to
play, but this is currently a bad idea, because different browsers support different
video formats (for reasons too boring to get into here.) IE and Safari prefer MP4,
whereas Opera, Firefox, and Chrome prefer WebM. Therefore, you use two
<source>
elements to point to both formats, and the browser loads the one it recognizes.
Yo u d o n ' it h a v e it o i n c l u d e it h e
type
attributes, but it is a good idea to do so, because
these tell the browser what type of video each element points to, and it can select
the one it wants instantly. If you don't include the
type
attributes, the browser has
to download a few bytes of each file to identify one it recognizes, which is a waste
of time and effort.
NOTE:
To e a s i l y c To n v e r t b e t w e e n v i d e To f To r m a t s , a g To To d ( a n d f r e e )
choice is Miro Video Converter
(www.mirovideoconverter.com).
