HTML and CSS Reference
In-Depth Information
Figure 6-8. Video clip with controls
Note that the display will vary slightly across the different browsers.
The tag for the video element provides other attributes, including a standard width and height and
autoplay and preload . Three different source files are indicated in the HTML. The type attribute supplies
information on both the video and audio encoding, and you must use the single and double quotation
marks. That is, the double quotation marks indicate something within the longer single quote. The browser
interprets the HTML starting from the first source element. As soon as the determination is made that this
is a file type the browser can display, that file is downloaded to the client computer.
This is the basic way to present video. However, as mentioned earlier, for our quiz application we are going
to hide the video until it is time to play it. To do this, we define a style for the video element specifying the
visibility as hidden. We also need the video clip to be on top of any other elements, including the elements
created dynamically in the code. Placing elements on top of other elements is controlled by the z-index,
what you might consider the third dimension after x and y. To do this we need the following style:
#vid {position:absolute; visibility:hidden; z-index: 0; }
This style specifies the original settings. The code will change it when it is time to play the video. #vid
refers to the id of the video element.
<video id="vid" controls="controls" preload="auto">
<source src="sfire3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="sfire3.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="sfire3.webmvp8.webm" type="video/webm; codec="vp8, vorbis"'">
Your browser does not accept the video tag.
</video>
We not only want the video to appear, we also want it to be on top of everything else. To do this, we will
modify the z-index. Think of z as the dimension coming out of the screen toward the user.
 
Search WWH ::




Custom Search