Adding Video and Audio - HTML5 Foundations - page 230

2. Add an <input> element and <label> below the Seek bar. Note the attributes on the <input> element.
<label for="volume">Volume: </label>
<input type="range" id="volume" min="0" max="1" step="0.1"
value="1">
3. Save the about.html file.
4. Open the video.js file.
5. Create a new variable volumeControl and initialize it by fetching the volume slider in your HMTL.
window.onload = function() {
...
var seekBar = document.getElementById(“seekBar");
var volumeControl = document.getElementById(“volume");
...
}
6. Create a new event listener on volumeControl that listens for the change event.
window.onload = function() {
...
// Add an event listener for the volume control.
volumeControl.addEventListener(“change", function(e) {
});
}
7. Inside the function block of this event listener, update the video's volume property using the current value
of the volumeControl .
// Add an event listener for the volume control.
volumeControl.addEventListener(“change", function(e) {
// Update the videos volume property.
video.volume = volumeControl.value;
});
8. Save the video.js file.
Open the About page and start playing the video. As you drag the volume slider, the volume changes. Figure 11-7
shows how your new Volume control should look.