User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 300

video.play();
return false;
}
__________
3 For brevity, the fallback content has been shortened; refer to Chapter 5 for comprehensive fall-
back content information for the video element.
This function sets the class attribute on the control graphic to a CSS class named
pause , which positions the CSS sprite over the pause button image. Next, it sets the
text content (which is used as fallback content if the CSS style sheet was disabled), and
it then plays the video. The return false bit ensures the link (with the ID of con-
trol_button ) does not go to its linked page when it's clicked; however, if JavaScript
is disabled, it'll go to a page called nojs-player.html that would presumably con-
tain a video player that will work without JavaScript (you'll have to build this one on
your own). This function also sets a new function for when the button control is clicked
again. This new function is called pauseVideo() , and it pauses the video and re-
verses the changes set in the playVideo() function. Go ahead and add this to your
script.js file:
…
function pauseVideo() {
control_graphic.className = "play";
control_button.onclick = playVideo;
control_button.title = "Play";
control_label.textContent = "Play";
video.pause();
return false;
}
That's all the JavaScript we need; now on to the CSS. First the link anchor element
is set to display as a block-level element and has its width and height set. The property
overflow is set to hidden so that content that flows outside of the dimensions
of the controls does not show up. This is needed to hide the fallback text, because
it will be pushed out of the bounds of the control. Open styles.css from the
video_player/css directory. Add the following CSS rule:
.video_controls a {
display: block;
width: 40px;
height: 40px;