HTML and CSS Reference
In-Depth Information
If clicking the Play button doesn't start your video, check your code against the files in folder 6 of the download
code. There is probably a typo or a missing semi-colon somewhere.
There is one problem: You don't have a way to stop the video yet. Let's fix that.
Creating the Pause Button
The <video> and <audio> elements have a method you can call that causes playback to pause. This is the
pause() method.
In this section, you follow a process similar to the one you used when you created the Play button.
The code for this exercise can be found in folder 7.
Start by adding the new Pause button to your HTML code:
1. Open the about.html file in your text editor.
2. Create a new <button> element underneath the Play button. Set the type to button and the ID to
pauseBtn .
<div id="video-controls">
<button type="button" id="playBtn">Play</button>
<button type="button" id="pauseBtn">Pause</button>
</div>
3. Save the about.html file.
Now, you need set up an event listener that fires when the Pause button is clicked:
1. Open the video.js file in your text editor.
2. Create a new variable called pauseBtn and initialize it by fetching the Pause button in your HTML.
window.onload = function() {
...
// Get the buttons.
var playBtn = document.getElementById(“playBtn");
var pauseBtn = document.getElementById(“pauseBtn");
}
3. Create an event listener on the Pause button that fires when the click event occurs. You should add this
below the event listener you created for the Play button.
Search WWH ::




Custom Search