jquerysafarihtml5-videohtml5-fullscreen

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


Solution

  • 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