JWPlayer Video Practice Set: Make the Buttons Work

by Jordan Marechal

HTML

<h3>JWPlayer Video - Make the Play/Pause Buttons work</h3>
<p>This page contains a video in JWPlayer with the default control bar hidden.  </p>
<p>Your task is to make the play and pause buttons work.  The reference at <a href="http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference#playback" target="_blank">JWPlayer Support</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 jQuery click event listener methods in the Javascript to complete this.</p>
<!-- SCRIPT TAG to load JWPlayer from hosting site. Typically in JSFiddle, you add these using the External Resources tab to the left, but I'm doing it here to deomonstrate typical usage in HTML. -->
<script src="http://content.jwplatform.com/libraries/IVuJB1Wr.js"></script>

<div id="videoDiv"></div>
<button id="playBtn">&#x25BA; Play</button>
<button id="pauseBtn">&#x2590;&#x2590; Pause</button>

CSS

#nasapromo {
   width: 95%; 
   
}

JavaScript

// We instantiate the player using the jwplayer() function, and 
//  passing it an object literal containing the config stuff

var player = jwplayer("videoDiv").setup({
    file: "http://courses.dce.harvard.edu/~cscie3/examples/week13/nasa-spinoffs.mp4",
    height: 200,
    width: 300,
    controls: false,
});

// Wait for the player to be ready
player.onReady(function () {
    // using jQuery to handle the Play button click
    //  jQuery was entirely optional for this - 
    //  The button-click handling would be easily done in plain JS, too,
    //   via 'document.getElementById("playBtn").addEventListener()'
        $('#playBtn').click(function (e) {
            // your code here to make the video play
            jwplayer.play;
             // .play(state);
        });
    // using jQuery to handle the Play button click    
        $('#pauseBtn').click(function (e) {
            // your code here to make the video pause
            jwplayer().pause(state);
           // .pause(state);
        });
}); // end of onReady