HTML and CSS Reference
In-Depth Information
The following sample code shows how to use the <video> tag to insert a video file
named longfellow-video.mp4 in a Web page.
<video width=”320” height=”240” controls=”controls”>
<source src=”longfellow-video.mp4” type=”video/mp4” />
If you are reading this, your browser does not support the
HTML5 video element.
</video>
It is a good idea to always include width and height attributes. If height and width
are set, the space required for the video is reserved when the page is loaded. However,
without these attributes, the browser does not know the size of the video and cannot
reserve the appropriate space for it. The effect will be that the page layout will change
during loading, when the video loads.
As with the audio element, the controls attribute adds video controls, like play,
pause, and volume. It can be set up in any of the three following ways:
• <videocontrols="controls">
• <videocontrols>
• <videocontrols="">
You can use the src attribute in the video element itself as shown in the sample
below:
<video controls autoplay src=”longfellow-video.mp4”>
If you are reading this, your browser does not support the
HTML5 video element.
</video>
Also, as you did with the audio element, you should use the source elements inside
the video element. The video element allows multiple source elements. The source
elements can link to different video files. The browser will use the first recognized format.
An example of a <video> tag with multiple <source> tags is shown below:
<video controls=”controls” autoplay=”autoplay”>
<source src=”longfellow-video.mp4” type=”video/mp4” />
<source src=”longfellow-video.ogg” type=”video/ogg” />
</video>
Browsers that do not support the video element will ignore the <video> tag. You
should always insert text content between the <video> and </video> tags, which will
display if the browser does not support the <video> tag.
Because this topic is designed to highlight HTML5, you will use the new video
element to insert the Longfellow video clip. (Note that you could have used the object
element as shown in the examples above to insert the same video clip.) As mentioned,
most browsers today support the video element, and the video clip is in a format
supported by the new tag (.mp4). However, that clip was converted from a .wmv
(Windows Media format) to a format supported by the video element (.mp4) using a
software application that converted the formats. When creating a Web page, you can
choose to use the object element together with a .wmv file or the video element
(as is done in this project) together with an .mp4 file to accomplish the same task.
