TheCrazyProfessor TheCrazyProfessor - 1 year ago 61
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:

$(window).keyup(function(e) {
if (e.which == 32) {

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 Source

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  ='isHovered');

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download