4.7 Video and Scripting—A Simple Video Player 89var playPause = function(ctrl) {
if (video.paused) {
video.play();
ctrl.value = String.fromCharCode('0x25AE','0x25AE');
}
else {
video.pause();
ctrl.value = String.fromCharCode('0x25B6');
}
};
The attribute video.paused tells us if the film is playing or not. It returns true
if the film is paused and false if it is playing. This makes starting and stopping
playback easy. video.start() and video.pause() are the suitable methods that
in turn set video.paused to false or true accordingly.
The button object passed in the argument ctrl is used to change the button to a
Pause or Play button via ctrl.value, depending on the current state. If we were
to assign ▶ directly, this would not have the desired result; instead, the
character string ▶ would be displayed literally as text written on the but-
ton. The correct method of creating Unicode symbols in JavaScript is via String.
fromCharCode(). To this, we pass the desired UTF 16 hexadecimal codes as
strings, separated by commas. Incidentally, the label text on the Pause button is
made up of two BLACK VERTICAL RECTANGLE symbols (▮).
We will need the playButton ID again later on.
4.7.3 Displaying and Setting the Playback Position
To display the current playback position, we use the new input type range, previ-
ously mentioned in Chapter 3, Intelligent Forms:
<input type="range"
min=0 max=1 step=1 value=0
onchange="updateProgress(this)"
id="currentPosition">
The attributes min and max set the permitted value range, and step determines
the interval by which the value will be changed when the user drags the slider.
Applied to our video, min specifies the start and max the end of our film, which
means that we have to set the value max to the total length of the video in seconds.
The right place to do this is initControls(), the right attribute to do it with is
video.duration. So we add the following lines to our initControls() function: