CODEWITHSUNDEEP
htmlhtml5-video
Matt
Matt

Reputation: 1257

How to play/pause html5 video with spacebar

How do you pause an html5 video with the spacebar using e.key? There's something off about the logic...

    <div class=modal-video id="v-5417">
    <div class=video-player>
                    <video id=v-5417-tape preload="none">
                        <source type="video/mp4" src="videos/anthem-od47.mp4">
                        <source type="video/webm" src="videos/anthem-od47.webm">
                    </video>
                    <div class="close-modal fade-control"></div>
                </div>
            </div>

JS

$( document ).on( 'keydown', function ( e ) {
            if ( e.keyCode === 32 ) {
                if (video.paused == true) {
                    // Play the video
                    video.play();
                }else{
                    if(video.play == true){
                    video.pause();
                    }
                }
            }
        });

Upvotes: 5

Views: 10335

Answers (4)

nayancy
nayancy

Reputation: 21

Use e.preventDefault() to stop the scrolling of the web page to bottom.

var vid=document.getElementById('your_video_id_goes_here');

   document.body.onkeypress = function(e){
   if(e.which == 32){  
 // stops default behaviour of space bar. Stop page scrolling down
    e.preventDefault();  
    play_pause_video 
  }
} 

function play_pause_video() {
 if (vid.paused) 
 { 
  vid.play(); 
}
else 
{ 
 vid.pause(); 
}
}

Upvotes: 2

Abhilash Shamsunder
Abhilash Shamsunder

Reputation: 352

Here's the changes to your javascript: 

$(window).keypress(function(e) {
  var video = document.getElementById("vid");
  if (e.which == 32) {
    if (video.paused)
      video.play();
    else
      video.pause();
  }
});

Upvotes: 10

Ahmad Awais
Ahmad Awais

Reputation: 37268

Here you go, this should work.

// Press spacebar to Play/Pause.
    var body = $( 'body' );

    body.keypress( function ( e ) {
        if ( e.which == 32 ) {
            // Stop the jerk.
            e.preventDefault();

            // If video is paused.
            if ( theVideo.get(0).paused == true ) {
                theVideo.get(0).play();
            } else {
                theVideo.get(0).pause();
            }
        }
    }); // End keypress().

Upvotes: 0

Carr7
Carr7

Reputation: 11

var videoPlayer = document.getElementById('Video1')
$(window).keypress(function(e) {
  if (e.keyCode == 0 || e.keyCode == 32) {
	if (videoPlayer.paused == false) {
            videoPlayer.pause();
            videoPlayer.firstChild.nodeValue = 'Play';
        } else {
            videoPlayer.play();
            videoPlayer.firstChild.nodeValue = 'Pause';
        }
  
  }
});
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="/website/js/playPause.js></script>
</head>
<body>
  <center>
    <h1>Video</h1>
    <video id="Video1" autoplay="yes">
      <source src="videoName.mp4" type="video/mp4" />
    </video>
  </center>
</body>
</html>

Upvotes: 1

Related Questions