HTML and CSS Reference
In-Depth Information
Adding a Video to the About Page Using the <video> Ele-
ment
The new HTML5
<video>
element has become very popular recently, with many companies implementing
support for HTML5 video within their websites. At the time of this writing, YouTube is running a trial where you
can opt-in to being shown HTML5 video (you can sign up at
http://youtube.com/html5
)
. Vimeo has a sim-
ilar scheme running. Treehouse also uses HTML5 video to display the lessons on its website.
The
<video>
element, in its simplest form, is similar to the
<img>
element in that it uses a
src
attribute to speci-
fy a path to the video.
<video src="videos/mikethefrog.webm"></video>
Also note that the
<video>
element has a complete set of start and end tags. You can place some content between
these tags that should be displayed if the browser does not support HTML5 video (more on this in the “Ensuring
Compatibility” section coming up).
In this chapter, you mainly use the
<video>
element; however, the
<audio>
element is nearly identical. What you
learn in this chapter can be transferred to the
<audio>
element when embedding audio content.
Adding the <video> Element
In this section, you add a basic
<video>
element to your About page. To start, you use only one video file,
the WebM file. It's best, therefore, to use a browser that supports this format (such as Google Chrome). In the next
section, you learn how to provide your video in multiple formats to ensure that everyone can view it.
The code for this exercise can be found in folder 2.
Follow these steps to add a
<video>
element:
1.
Open the
about.html
file in your favorite text editor.
2.
Between the main page heading (
<h1>
) and the page text, add a new
<div>
element with the ID
video
.
This element will contain your
<video>
element as well as the controls that you build later in this chapter.
<div id="video"></div>
