HTML and CSS Reference
In-Depth Information
<section>
<video
width="320"
height="240"
poster="poster.jpg" id="my_video">
<source src="trailer.webm"
type='video/webm; codecs="vp8, vorbis"' />
<source src="trailer.mp4" type='video/mp4;
codecs="avc1.4D401E, mp4a.40.2"' />
<source src="trailer.ogv"
type='video/ogg; codecs="theora, vorbis"' />
<p>Video playback not sup-
ported.</p>
</video>
<div class="video_controls">
<a
href="nojs-player.html"
title="Play" id="control_button">
<span
id="control_graphic" class="play"></span>
<label
id="control_label">Play</label>
</a>
</div>
</section>
</body>
</html>
As you can see, this code contains the video element with fallback content 3 fol-
lowed by a div area for the custom video control. To get this example to work, you
will have to include three video files sized to 320 by 240 pixels, which are named
trailer.webm , trailer.mp4 , and trailer.ogv in the same directory as in-
dex.html (it wouldn't be a bad idea to create a video directory or similar for the
videos, if you do this be sure to update the HTML).
Next we'll create the JavaScript that will be used to enable this custom control. Open
script.js from the video_player/js directory. For the code, first we will cre-
ate variables to hold a reference to the video , anchor ( <a> ), span , and label on the
page. Next the init() function is updated so that it sets the value of each JavaScript
variable to a reference to an HTML element, which can be retrieved through their id
Search WWH ::




Custom Search