4

I have a web page where I want to let the user to click a button and start to watch a video in fullscreen mode. However, I don't want the video to play immediately after clicking the button. I want it to wait some seconds and then play the video and go fullscreen. To achieve this; I have used the setTimeout function like so;

 function startVideoAfterSecs(seconds){
    setTimeout(() => {
      this.activateFullscreen(); // function to go fullsreen
      this.player.play();
    }, seconds);
  };

I know that it is not possible to go fullscreen without a user interaction, there should be some user event to trigger it. That's why, startVideoAfterSecs is bound to a button's onclick event. However, I am still getting the error;

Unhandled Rejection (TypeError): fullscreen error

I know that this error is causing about a browser blockage, because it does not accept it as a user action since the setTimeout function is being used. Are there any way to solve this issue?

Thanks in advance.

2 Answers 2

2

"startVideoAfterSecs is bound to a button's onclick event"

But this.activateFullscreen() and this.player.play() are not anymore, since they are called from the timeout callback.
But actually that's not even the problem, which is more that after some time the browsers will not consider the call as still being from a user-interaction, it seems to be around 5s in Chrome, but it may very well change at any time.

For the play() call, you can workaround that by calling it in the click event handler directly, then pausing as soon as possible. This will mark the HTMLMediaElement as user-activated, and you'll be able to call play on it whenever you want.

For the fullscreen mode though, no other way than requesting an other user's interaction, or to make it in that given time.

2
  • Hello, thank you for the perfect explanation. After I saw your answer, I changed the timeout to 2, previously it was 5. It seems that, with using 2 seconds delay, I am not getting any error that I was getting with 5 seconds. But as you said, it looks like an unreliable way. Aug 8, 2020 at 10:12
  • Unfortunately it's not tied by specs that they should keep it active for 5 seconds. But they do it for years now, so I guess it's quite safe.
    – Kaiido
    Aug 8, 2020 at 10:13
0

Firstly, make sure this is pointing to the element you want to go fullscreen. Also, try using requestFullscreen() instead. Here's an example of it working with setTimeout()...

https://jsfiddle.net/8u3t5ae7/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.