HTML and CSS Reference
In-Depth Information
Building a custom video controller
Let's look at interacting with the JavaScript methods associated with an HTML element.
Earlier I mentioned that the
video
element has a
play()
method and a
stop()
method. We can use these to control video playback from JavaScript, which means we
can create a control bar with a custom play and pause button. Say goodbye to a con-
trol bar that looks different in every browser! For the graphics we'll use CSS, but more
specifically we'll use a concept called
CSS sprites
, which is a technique for using one
image file to display two or more images at different points on the page. The idea behind
this technique is that a single image file can contain a whole bunch of images, which
then can be cropped and positioned in different ways to show the different images. This
is kind of like looking through a paper towel tube at cookies spread out on a cookie
sheet. You'll be able to see only one cookie at a time, but you can move the sheet around
to show different cookies. This technique gives the illusion of multiple images having
been downloaded, but in fact only one has, meaning all the images will appear on the
page at once and only one request has gone to the server to fetch the image.
On to our example…duplicate the
jstemplate
directory from earlier and rename it
video_player
. Create an image for the sprite that contains a play and pause graphic
for our video controls (
Figure 7-5
). Set the size to 80 pixels wide by 30 pixels tall.
Figure 7-5.
An image sprite with two images for the controls on a simple video player
Update the HTML in
index.html
to look like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Apprentice</title>
<link
rel="stylesheet"
href="css/
styles.css" type="text/css" />
<script
type="text/javascript"
sr-
c="js/script.js" defer></script>
</head>
<body>
Search WWH ::
Custom Search