HTML and CSS Reference
In-Depth Information
Adding a Video to the About Page Using the <video> Ele-
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 ) . 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>
Search WWH ::

Custom Search