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">
<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>
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) {
Search WWH ::

Custom Search