Media Buttons/Javascript

Question

I'm working on this project and I have everything completed besides three javascript buttons. (yes I have to use javascript)

The buttons appear but when clicking on them they do nothing. I think the event listener isn't working for these. Any help sorting this out would be appreciated.

I've included all the necessary code in a fiddle here: https://jsfiddle.net/L5r3swbe/

window.onload = function() {

  // Video
  var video = document.getElementById("video");

  // Buttons
  var playButton = document.getElementById("playPause");
  var muteButton = document.getElementById("mute");
  var fullScreenButton = document.getElementById("full-screen");

  // Sliders
  var seekBar = document.getElementById("seek-bar");
  var volumeBar = document.getElementById("volume-bar");

}

// Event listener for the play/pause button
//playButton.addEventListener("click", function() {
document.getElementById("playPause").addEventListener("click", function() {
  if (video.paused == true) {
    // Play the video
    video.play();

    // Update the button text to 'Pause'
    playButton.innerHTML = "Pause";
  } else {
    // Pause the video
    video.pause();

    // Update the button text to 'Play'
    playButton.innerHTML = "Play";
  }
});

// Event listener for the mute button
muteButton.addEventListener("click", function() {
  if (video.muted == false) {
    // Mute the video
    video.muted = true;

    // Update the button text
    muteButton.innerHTML = "Unmute";
  } else {
    // Unmute the video
    video.muted = false;

    // Update the button text
    muteButton.innerHTML = "Mute";
  }
});

// Event listener for the seek bar
seekBar.addEventListener("change", function() {
  // Calculate the new time
  var time = video.duration * (seekBar.value / 100);

  // Update the video time
  video.currentTime = time;
});

// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
  // Calculate the slider value
  var value = (100 / video.duration) * video.currentTime;

  // Update the slider value
  seekBar.value = value;
});

// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
  video.pause();
});

// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
  video.play();
});

// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
  // Update the video volume
  video.volume = volumeBar.value;
});

/* body { padding-top: 70px; } */



h1 { font-size: 3em; font-weight: bold; margin-top: 0;}

div#topHeaderRow {


   font-size: 0.9em;
 
   /*
   height: 2em;
   background-color: yellow;  
   line-height: 2em;
*/
}

.price { font-size: 1.4em; color: red; font-weight: bold;}

.similarTitle { font-weight: bold; font-size: 0.9em; }

.cartText { font-size: 0.75em; }

footer {
   margin-top: 1em;
   background-color: #E7E7E7;

}

.tight-form-group { margin-bottom: 5px; }

#copyrightRow { background-color: #3A3A3A; padding: 0.75em 0 0.75em 0; margin-top: 5px;}



  
    
    
    Chapter 7

    
    

    
    

    
    
    
   
    
  

  



   
      
         
            
               
               Welcome to Art Store, Login or Create new account
            

            
               
                   My Account
                   Wish List
                   Shopping Cart
                   Checkout                  
               
            
         
      
      
   
   
      
         
            
                Art Store 
            
            

            
               
               
                  Search
                  
                  
                  
                  
               
                
            

                        
         
     
      
      
   
   
   
      

         
            
               
            

            
             
               Home
               About Us
               Art Works
               Artists
               
                 Specials 
                 
                   Special 1
                   Special 2                   
                 
               
                           
            
         
      
  
   
  
   



   

      
         Video How Tos
         Sample video



  




  
    
   
    
    
    
  



  
         
         
         

      
  
      
      
    
      
         
            
               Other Videos
            
            
               
                  Working with the cart
                  Registering an account
                  Checking out
                  Using the search
                  Checking your order
                  Returning your order
               
            
           

         
            
               Problems Playing Videos?
            
            
               
                  Download more recent browser
                  Install Flash

Media Buttons/Javascript

Answers (1)

Related Questions