HTML and CSS Reference
In-Depth Information
Creating the Play Button
To start playing a video, you can call the
play()
method on the
<video>
element through JavaScript.
The Play button uses a
<button>
element that hooks up to an event listener in your JavaScript code. When the but-
ton is clicked, the event listener calls the
play()
method on your
<video>
element.
The code for this exercise can be found in folder 6.
Start by adding the new Play button to your HTML code. Follow these steps:
1.
Open the
about.html
file in your text editor.
2.
Underneath the
<video>
element, create a new
<div>
with the ID
video-
controls
.
<video id="myVideo" width="400" height="225"
poster="img/poster.png" preload="none">
...
</video>
<div id="video-controls"></div>
3.
Within this new
<div>
element, create a
<button>
element. Set the type to
button
and the ID to
playBtn
.
<div id="video-controls">
<button type="button" id="playBtn">Play</button>
</div>
4.
Save the
about.html
file.
Next, you need to set up an event listener that fires when the Play button is clicked:
1.
Open the
video.js
file in your text editor.
2.
Create a new variable called
playBtn
and initialize it by fetching the Play button in your HTML.
window.onload = function() {
// Get the video.
var video = document.getElementById(“myVideo");
// Get the buttons.
var playBtn = document.getElementById(“playBtn");
}
3.
Now create an event listener on the Play button that fires when the
click
event occurs.
window.onload = function() {
...
// Add an event listener for the play button.
playBtn.addEventListener(“click", function(e) {
