HTML5 Guidelines for Web Developers

(coco) #1
4.7 Video and Scripting—A Simple Video Player 93

var playPause = function() {
if (video.paused) {
_play();
}
else {
_pause();
}
};


4.7.5 Selecting Specific Scenes in the Film


To select individual scenes, we first need a list with timestamps and titles. A pull-
down menu provides the basis:



The rest is simple and taken care of by the callback selectScene(). We pass it the
selected entry as the argument. Then we convert its timestamp to seconds and
set video.currentTime to the resulting value. The method _play() serves us well
once again and starts playing the video at the desired point:


var selectScene = function(ctrl) {
arr = ctrl.value.split(":");
video.currentTime = parseFloat((arr[0]60)+(arr[1]1));
updateProgress();
_play();
};


4.7.6 Set Volume to High, Low, or Mute


All that’s left is the volume control. Let’s start with a simple exercise—on/off.
Once more, we need a button in the HTML code with a label formed from a Uni-
code symbol, this time BEAMED EIGHTH NOTES (♫):


<input type="button"
value="♫"
onclick="mute(this)">

Free download pdf