CODEWITHSUNDEEP
jquerysafarihtml5-videohtml5-fullscreen
TheCrazyProfessor
TheCrazyProfessor

Reputation: 949

play/pause HTML5 video with spacebar in fullscreen makes error sound

Important: This was a bug in Safari 10 Public Beta

My code should do so the spacebar become a shortcut for playing/pause the video, but only when the user is having the mouse over the video, or are in fullscreen.

And it works! But in fullscreen mode, it makes an 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: Tested in Safari 10

Upvotes: 0

Views: 875

Answers (1)

adeneo
adeneo

Reputation: 318342

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

Upvotes: 1

Related Questions