HTML5 Video Practice Set: Make the Buttons Work

by Thomas Smalls

HTML

<h3>HTML5 Video - Make the Play Button work</h3>
<p>This page contains a video with the default control bar hidden.  You can test-play the video by right-clicking on the image and selecting Play.</p>
<p>Your task is to make the play and pause buttons work.  The reference at <a href="http://www.w3schools.com/jsref/dom_obj_video.asp" target="_blank">w3Schools</a> may be of help, as will the examples in video 13.3 in the course.</p>
<p>You will have to add one line of code to each of the event listener methods in the Javascript to complete this.</p>
<video 
 id="nasapromo"  
 src="https://courses.dce.harvard.edu/~cscie3/examples/week13/nasa-spinoffs.mp4" 
 loop="true"
 poster="https:///courses.dce.harvard.edu/~cscie3/img/ext.jpg">
    [this message appears if the browser cannot play the video]
</video>
<button id="playBtn">&#x25BA; Play</button>
<button id="pauseBtn">&#x2590&#x2590 Pause</button>

CSS

#nasapromo {
   width: 95%; 
   
}

JavaScript

// we get our video element by its ID
var vid = document.getElementById("nasapromo");
var i = 0;

// we get our Play anbd Pause buttons by ID
var playB = document.getElementById("playBtn");
var pauseB = document.getElementById("pauseBtn");

// SOLUTION NOTE: Call the play() and pause() methods
//   on the 'vid' object, respectively 
playB.addEventListener("click", function(evt){
    // do something here to make the video play
    vid.play();
    pauseB.innerHTML="Pause"; 
    /* Because I'm used to only having to press the play button...
   	i++
   	if(i%2){vid.play()}
    else{vid.pause()} */
});
pauseB.addEventListener("click", function(evt){
    // do something here to make the video pause
  vid.pause();
  pauseB.innerHTML="Paused" //Because, Why not?
});