TheCrazyProfessor TheCrazyProfessor - 1 month ago 6
jQuery Question

play/pause html5 video with spacebar in fullscreen(Error sound?)

Use the spacebar as play/pause function, it's can only be active when the user is having the mouse over the video, or are in fullscreen.

But in fullscreen mode, it's bug and make error sound. Why?

Here is my code:

objectVideo.hover(function(){
$(window).keyup(function(e) {
if (e.which == 32) {
playVideo();
}
});
});


if there is a better way or if you just know how to fix it I will be so happy


NOTE: Testet in Safari 10

Answer

Make sure you detect the mouse over the video outside the key handler, and then in the key handler just check if it's in fullscreen mode, or being moused over

var native = objectVideo.get(0);

objectVideo.on('mouseenter mouseleave', function(e) {
    $(this).data('isHovered', e.type==='mouseenter');
});

$(document).on('keyup', function(e) {
    if (e.which == 32) {
        var fullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        var isHovered  = objectVideo.data('isHovered');

        if (fullScreen || isHovered) {
            native.paused ? native.play() : native.pause();
        }
    }
});

Example

Comments