I am working on a video player and I want to control some basic video actions like play, pause, seek via keyboard. So here's the code that I am using for getting the keyboard events.

$("#video_container_div").on("keypress", function (e) {
    e.preventDefault();
    e.stopPropagation();
    switch (e.which) {
    case 32:
        { // space
            console.info("I am in keyboard controls");
            $("#playpausebtn").click();
            break;
        }
    default:
        return;
    }
});
$("#fullscreenbtn").click(function () { //bind click event on fullscreen button
    console.info("I am in fullscreen")
    fullscreenFun();
});

Now the issue I am facing is if user click on fullscreen button and then press space bar, the event fired twicely.http://202.164.44.244/products/trunk/video_player/sample1.htm First it play/pause the video then automatically fired the fullscreen or any last focused event.

If I pressed fullscreen button and then space bar then console displays this:

I am in fullscreen
I am in keyboard controls
I am in fullscreen  

In another stack question someone gave this answer of similar issue

Here's the link of the player :

http://202.164.44.244/products/trunk/video_player/sample1.htm

But I need concrete solution of this. The issue already took my whole day.

I am working on a video player and I want to control some basic video actions like play, pause, seek via keyboard. So here's the code that I am using for getting the keyboard events.

$("#video_container_div").on("keypress", function (e) {
    e.preventDefault();
    e.stopPropagation();
    switch (e.which) {
    case 32:
        { // space
            console.info("I am in keyboard controls");
            $("#playpausebtn").click();
            break;
        }
    default:
        return;
    }
});
$("#fullscreenbtn").click(function () { //bind click event on fullscreen button
    console.info("I am in fullscreen")
    fullscreenFun();
});

Now the issue I am facing is if user click on fullscreen button and then press space bar, the event fired twicely.http://202.164.44.244/products/trunk/video_player/sample1.htm First it play/pause the video then automatically fired the fullscreen or any last focused event.

If I pressed fullscreen button and then space bar then console displays this:

I am in fullscreen
I am in keyboard controls
I am in fullscreen  

In another stack question someone gave this answer of similar issue

https://stackoverflow./a/17936661/1652512

Here's the link of the player :

http://202.164.44.244/products/trunk/video_player/sample1.htm

But I need concrete solution of this. The issue already took my whole day.

• javascript
• jquery
• keyboard-events

Share Improve this question Follow edited May 23, 2017 at 11:50 CommunityBot 111 silver badge asked Mar 18, 2015 at 6:17 Arjun ThakurArjun Thakur 65588 silver badges2121 bronze badges 3

• 1 Can you provide plunkr link ? – Anik Islam Abhi Commented Mar 18, 2015 at 6:23
• What does ` fullscreenFun();`? – Evan Knowles Commented Mar 18, 2015 at 6:26
• I have just edited the question and mentioned the link. Please have a look – Arjun Thakur Commented Mar 18, 2015 at 6:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Final Edit: Apologies this took a bit, it's midnight and I'm a bit tired.

You're using the wrong event! Ignore what I said about focus and simply replace "keypress" with "keydown" and it should work fine. The focus will remain on the fullscreenbtn but your event will work properly and e.stopPropagation() will be enough to prevent the event from firing multiple times. Your code should read:

$("#video_container_div").on("keydown", function (e) {
    e.preventDefault();
    e.stopPropagation();
    switch (e.which) {
        case 32:
        { // space
            console.info("I am in keyboard controls");
            $("#playpausebtn").click();
            break;
        }
        default:
            return;
    }
});
$("#fullscreenbtn").click(function () { //bind click event on fullscreen button
    console.info("I am in fullscreen")
    fullscreenFun();
});

I thought there was something weird about you using stopPropagation at the event triggering multiple times.

It's worth noting here that this will only trigger when the video_container_div or an element inside it is focused. "keydown" and "keypress" require focus to trigger without using JavaScript (you can call .trigger("keydown") if you want for example). If somebody is focused on another element on the page or has just opened the page (with nothing focused) that "keydown" event will not trigger.

---

When you click the fullscreen button that then puts the fullscreen button in focus, so when you hit the spacebar it triggers on both the keypress event you made and counts as a click because many browsers consider a space or enter keypress to be a click when something is in focus.

Try adding

$("#video_container_div").focus();

To the end of your

$("#fullscreenbtn").click(function () { 

Event to remove focus from the fullscreenbtn element and see if it still triggers twice.

EDIT: Looked at the exact code on your site and I added this and it worked for me

$(h + t.$fulScrnBtn).click(function () { //bind click event on fullscreen button
    fullscreenFun();
    $(h + t.$plyBtn).focus();
});

The reason this is working isn't ultimately what you want however. All that does it put the play/pause button in focus so when someone presses the space bar the browser counts that as a click on the button, not because somebody pressed space while focused on the video.