88 Chapter 4—Video and Audio
z video.videoWidth = 428 (original width)
z video.videoHeight = 240 (original height)
z video.poster = URL for bbb_poster.jpg (poster frame)These few attributes are of course not enough to implement our video player.
And indeed they are only additional elements of the HTMLVideoElement, which
also represents an HTMLMediaElement—the object that contains all the neces-
sary methods and attributes. If you are curious, you can look it up in the speci-
fication at http://www.w3.org/TR/html5/video.html#htmlmediaelement.
The real work starts with oncanplay, because it refers to the JavaScript function
to be executed as soon as the browser can play the video. In our example this
function is initControls() where a reference to the video is created and saved
in the global variable video. In the course of implementing our video player, we
will have to add entries to initControls() a few more times, but for now we only
need the following code:var video;
var initControls = function() {
video = document.querySelector("VIDEO");
};The method document.querySelector() is part of the CSS Selectors API. In the vid-
eo variable it provides a reference to the first video element in the document. This
gives us access to the HTMLMediaElement interface, and we can now start imple-
menting our first feature—starting and stopping playback.4.7.2 Starting and Stopping the Video
To start and stop playback, we first need a button in the HTML document that
can react to a user clicking it:<input type=button
value="▶"
onclick="playPause(this);">
id="playButton"▶ is a character reference to the Unicode symbol BLACK RIGHT-POINT-
ING TRIANGLE, which we can conveniently use as Play button. The function of
starting and stopping playback is contained in playPause(), a callback function
called with every click, which gets passed the button object in the argument this: