Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Calling focus on player causes controls to show on IE/Edge

You can replicate this on the demo page here: http://jw7.jwplayer.com/

If you focus the player using the following javascript the controls will become visible if they were hidden already(by playing the video and waiting for them to hide): jwplayer('botr_IMUjQRAB_j25eWfnn_div').getContainer().focus()

This is causing an issue for me on Edge with Windows 10 touch. I am setting focus on the 'displayClick' event and this is triggered when I touch on the video player using touch. But since the controls are also supposed to toggle on touch, this results in the controls staying hidden when tapping on the video.

Are there any suggestions to work around this issue? I have tried setting focus on a timeout, but then the controls just disappear and then reappear when the timeout is over.

10 Community Answers

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi there,

It is expected behavior for the player to show the controls when the player is focused. This is for accessibility reasons.

Do you mind if I ask what the reason for is for setting the focus on the player on the ‘displayClick’ event? This way I can see if I can come up with a workaround for you.

Thank you.

Up Down

Joel

User  
0 rated :

I am setting focus on displayClick because I need the keyboard shortcuts to work after the display is clicked. If I don't then the player loses focus after a displayClick. Maybe there is an easier way to make that work without setting focus manually? It looks like this is not an issue on the demo page, but if I just setup a player like this, it will not retain focus after a display click.

jwplayer("video").setup({
sources: [{
file: "http://s3.amazonaws.com/tn8newdevcontent/19/b909a1383fcdc8aababdae501242cb731add809b/2291/shared/big_buck_bunny.mp4", type:"mp4"
},{
file: "http://s3.amazonaws.com/tn8newdevcontent/19/b909a1383fcdc8aababdae501242cb731add809b/2291/shared/big_buck_bunny.webm", type:"webm"
}],
width: "400px",

logo: {hide: true}
})

Up Down

Alex

JW Player Support Agent  
0 rated :

When you say “after the display is clicked” do you mean when the display on the touchscreen is tapped in an area where the player isn’t?

Up Down

Joel

User  
0 rated :

Sorry for the confusion. I mean't clicking on the jwplayer video display (not on the controls). So when I click on the video screen with the mouse I need the player to keep the focus so I can use the keyboard shortcuts. This seems to not be an issue on the demo page, so maybe there is an easier way to make sure the keyboard shortcuts can always be used after the video is clicked.

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi Joel,

I have a Windows 10 laptop with a touchscreen and when I go to https://jw7.jwplayer.com, begin playback, tap the player to hide the controls – I’m still able to pause the playback by pressing the spacebar. Is this the behavior you are referring to? If so, what browser are you using?

Up Down

Joel

User  
0 rated :

If you use the setup I described with the player out of the box you can see the issue.

Up Down

Joel

User  
0 rated :

Sorry forgot about the browser. You can see it on Firefox.

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi Joel,

Can you try this out and see if it works for you?

jwplayer("video").setup({
  sources: [{
    file: "http://s3.amazonaws.com/tn8newdevcontent/19/b909a1383fcdc8aababdae501242cb731add809b/2291/shared/big_buck_bunny.mp4", type:"mp4"
  },{
    file: "http://s3.amazonaws.com/tn8newdevcontent/19/b909a1383fcdc8aababdae501242cb731add809b/2291/shared/big_buck_bunny.webm", type:"webm"
  }],
  width: "500px",
  logo: {hide: true}
});

var playerElement;

function focusOnPlayer() {
  playerElement.focus();
}

jwplayer("video").on("ready", function() {
  playerElement = jwplayer("video").getContainer();
  focusOnPlayer();
  playerElement.addEventListener("focusout", function() {
    console.log("focusout event fired.");
    focusOnPlayer();
  });
});

Please let me know.

Up Down

Joel

User  
0 rated :

Hi Alex,

I tried your sample and still on Firefox I was unable to use the keyboard controls after clicking on the player. Do you have another suggestion?

Thanks,
Joel

Up Down

Alex

JW Player Support Agent  
0 rated :

Just to make sure, you’re running at least Firefox 52 right? Firefox only started supporting the focusout event in 52.

This question has received the maximum number of answers.