HTML5 Video Practice Set: Make the Buttons Work

by Jordan Marechal

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="http://courses.dce.harvard.edu/~cscie3/examples/week13/nasa-spinoffs.mp4" 
 loop="true"
 poster="http://content.neit.edu/static/cscie3/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");

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

playB.addEventListener("click", function(evt){
    // do something here to make the video play
	$('#playBtn').click(function(){
  	vid.play();
});
pauseB.addEventListener("click", function(evt){
    // do something here to make the video pause
$('#pauseBtn').click(function(){
  	vid.pause(); 
});