rexhin rexhin - 6 months ago 97
jQuery Question

Pause the HTML5 video when space bar is pressed

I have this script which should pause the HTML5 video when space bar is pressed. Bur in Firefox it pauses on all keys you press no matter is space or other and in Chrome it doesen't work at all.

Also double clicking the video doesen't go to full screen.

$(window).keypress(function(e) {
if (e.keyCode == 0) {
if (video.paused == true)
video.play();
else
video.pause();
}
});


$video.dblclick(function() {
video.mozRequestFullScreen();
video. webkitRequestFullscreen();
video.requestFullscreen();
});


fiddle: http://jsfiddle.net/6f7navgu/4/

Answer

Try the snippet below

var video = document.getElementById('video_id');   
document.onkeypress = function(e){
    if((e || window.event).keyCode === 32){
        video.paused ? video.play() : video.pause();
    }
};

To have the video in fullscreen mode, use the following one

var video = document.getElementById("video_id");
document.ondblclick = function(){
    if(video.requestFullscreen){
        video.requestFullscreen();
    }else if(video.mozRequestFullScreen){
        video.mozRequestFullScreen();
    }else if(video.webkitRequestFullscreen){
        video.webkitRequestFullscreen();
  }
};

Working jsBinl

Comments