Setting Full Screen with the configuration in Javascript

Support
1

Hi,
Is there a way through the configuration in Javascript to start the player in Full Screen?
Thanks, Peter

1 Like
2

Hi Peter,

A possible approach would be to listen to any of the available player events to know when it’s been set up (for example onReady) and, upon that callback, set the Player ViewMode to fullscreen via this call: https://bitmovin.com/docs/player/api-reference/web/web-sdk-api-reference-v8#/player/web/8/docs/interfaces/core.playerapi.html#setviewmode

3

Hi Alberto,

I’m halfway with this. OnReady is working. But then I use:

player.setViewMode(ViewMode.Fullscreen);

but there is no effect.

Any advise?

4

Hi there,
sadly there are some restrictions what javascript can do and putting an element into full screen will require a user interaction. This means, that you can do player.setViewMode(ViewMode.Fullscreen); on a button.onclick handler, but not on an event callback. The browser will just not allow it.

5

That’s what I feared.
So there is no way to start the player in Fullscreen.

6

Sad to inform you, but there is no way. The closest thing would be to use CSS make the player fill the document by setting width and height to 100%, but it’s not fullscreen.

I have prepared this minimal sample for you to experience the problem for yourself if you want to:

<!DOCTYPE html>
<html>
  <body>
    <div id="toFullscreen" style="background-color: grey; height: 30px; width: 30px"></div>
    <button onclick="makeFullscreen()">Fullscreen button</button>
  </body>
  <script>
    function makeFullscreen() {
      document.getElementById('toFullscreen').requestFullscreen();
    }
    makeFullscreen();
  </script>
</html>

The initial call of makeFullscreen(); will result in a warning Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture and a promise rejection. When the same method is executed via the onclick handler everything is fine.

7

Helpfull. Thank you very much.

8

While it is not possible for autoplay due to the reason outlined by @Kenny above, it would be possible as a direct reaction to clicking the play button in the UI. This is currently not possible out of the box with the Bitmovin Player UI, but I created Pull Request to enable this via the UI Configuration (or component configuration if you’re creating your own UI): Add configuration to enter fullscreen on initial play by dweinber · Pull Request #521 · bitmovin/bitmovin-player-ui · GitHub

We’ll see if this gets picked up, but in any case it shows you the idea how to do this if you have a fork of the UI project. Alternatively, you could attach onClick listeners via Javascript to the relevant UI elements as well and trigger the fullscreen from there.

9

@peter.vanvogelpoel I’m happy to let you know that fullscreen on playback start was added to the Player UI and released as part of 8.104.0. Please note that the technical limitation from browsers outlined earlier in this post of course are still valid, so this won’t have any effect with autoplay enabled, but will work if the user clicks any of the play buttons in the UI.

You can now enable this e.g. by setting uiConfig.enterFullscreenOnInitialPlayback = true if you create your own player UI instance, or playerConfig.ui.enterFullscreenOnInitialPlayback = true if you use the player UI instance managed by the Bitmovin Player Web SDK.

10

Hello Daniel,

Thank you for the update. Its a usefull feature. Although I was hoping for a fullscreen on autoplay or on the player showing. But I do understand that that’s not possible.

Thanks again for your feedback and work.

Peter