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.