Player.js: Full screen method?

[svinkle]

Hi, I'm wondering if there's a method to invoke the video to play full screen? I don't see this in the documentation.

Thanks.

[ccampbell]

@bdougherty has more knowledge about this and he is currently on vacation, but the browser fullscreen API requires a user interaction to trigger fullscreen for security reasons. I don't think we can really do anything about this.

What is your use case exactly?

[svinkle]

I'm building a custom player with accessibility in mind. I thought this would be a nice feature to have along side all the other player controls.

[ccampbell]

Ah okay, so basically you want to offer your own fullscreen button/action in addition to the fullscreen button we already have in the player?

Just out of curiosity are there any specific accessibility concerns with our current fullscreen implementation in our player? If so I think we should def address those.

[svinkle]

The current control itself is fine. It has the correct role and a clear label as to what it does. Though when in full screen, the player does not capture the keyboard and users are able to escape and navigate around in the content behind the player. This is true for pretty much all players I've tested. I think the player should be treated as a dialog window at this point, capture and hold keyboard focus within its set of controls until dismissed from full screen.

The script I'm writing will be a wrapper for embedded players which generates custom controls on load. This way there's more control on how things will sound to screen readers, adding full keyboard support, and eliminating the hurdle that comes with disappearing controls. The original player and its controls are skipped over when navigating the page to avoid having multiple controls be discoverable.

It's just a concept that I'm working on at this point. Still lots to do but the end result _should_ be a better screen reader and keyboard friendly experience. Having a full screen control would be a nice to have.

[ccampbell]

Okay awesome. Thanks for clarifying. Capturing the keyboard while in fullscreen actually sounds like a logical thing to do. I think it may be a bit tricky to implement because we wouldn't want to also capture browser defined keyboard shortcuts (such as command + l), but we will definitely investigate that (really it should probably be something that browsers handle themselves).

As for adding fullscreen related methods/events to the API, I can't offer a specific timeframe for this, but it is definitely something we will consider as we update/improve the API going forward!

[bdougherty]

Unfortunately I don't think there's a way we can support this. Browsers require a user interaction to initiate full screen, but none of them seem to propagate that through a postMessage (it's the same reason we can't support play() on iOS).

Can you explain a bit more about the esc thing? All browsers prevent doing anything with the escape key because it triggers the browser to exit fullscreen.

[svinkle]

I'm still working on it, but it seems like I may be able to tap in to the Fullscreen API that's available in browsers these days. https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

I should be able to adjust the size of the iframe when this method is invoked, make it 100% width and keep the aspect ratio, then readjust when exiting out of fullscreen.

For the escape thing, I didn't mean the esc key. When videos are in fullscreen mode users can still navigate around the page content behind the video using the Tab key. Ideally the keyboard should be "captured", and remain within the element which is currently in fullscreen mode.

[svinkle]

I got this working using the Fullscreen API linked above. Closing this.

[BenWoodford]

Chiming in on this with an issue I've found with using the Fullscreen API...

Not only does the player itself not go into full screen mode (it thinks it's embedded in the page still, and has the full width controls), the full screen button requires two clicks to function as the first puts the player into full screen _again_, then the second takes it out. It's a major usability issue, so a way to at least mark the player as being fullscreen would be a really useful thing to have.

[frankbiemans]

Hi @BenWoodford , I'm running into the same issue right now. My player does go into fullscreen but you need to click the fullscreen-icon twice to first activate and then close the fullscreen mode. Did you find a solution by any chance?

[BenWoodford]

I made it not go fullscreen on clicking the external play button.

[frankbiemans]

Fair enough, that works. I'm asking for a mobile-solution so i really need the player to go fullscreen, hopefully i'll find a solution.

[svinkle]

Someone @ mentioned me but I guess they removed their question. Either way, here's my old ES5 solution that might help others.

Call the toggleFullscreen function in a button click event handler, then:

toggleFullscreen = function() {
    var fullscreenChange = null;
        // other vars …

    // Check for fullscreen support
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {

        // If there's currently an element fullscreen, exit fullscreen
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }

        // Do stuff when the video exits fullscreen mode
        // …
    } else {

        // Otherwise, enter fullscreen
        // `videoWrapper` is just a `div` element wrapping the video
        if (videoWrapper.requestFullscreen) {
            videoWrapper.requestFullscreen();
        } else if (videoWrapper.mozRequestFullScreen) {
            videoWrapper.mozRequestFullScreen();
        } else if (videoWrapper.webkitRequestFullscreen) {
            videoWrapper.webkitRequestFullscreen();
        } else if (videoWrapper.msRequestFullscreen) {
            videoWrapper.msRequestFullscreen();
        }

        // Do stuff when the video enters fullscreen mode
        // …
    }

    fullscreenChange = function() {

        // Do something on fullscreen change event
        // …
    };

    document.onfullscreenchange = function() {
        if (!document.fullscreenElement) {
            fullscreenChange();
        }
    };
    document.onwebkitfullscreenchange = function() {
        if (!document.webkitFullscreenElement) {
            fullscreenChange();
        }
    };
    document.onmozfullscreenchange = function() {
        if (!document.mozFullScreenElement) {
            fullscreenChange();
        }
    };
    document.onmsfullscreenchange = function() {
        if (!document.msFullscreenElement) {
            fullscreenChange();
        }
    };
};

[sqlninja]

@svinkle sorry, I removed my comment, because I thought I had found a solution, but I am suffering from the issue that @BenWoodford had where the player is going to full screen but the video isn't _active_ but if I exit full screen and then click my play button again then the video is loaded...

I'm going to test your ES5 code real quick to see if that solves my issue...

Thanks,
John

[fredlee0109]

It would still be nice to have a fullscreen API method

[anjalirana]

@svinkle As you said videoWrapper is just a div element wrapping the video. Could videoWrapper be an iFrame too?

[svinkle]

@anjalirana I don't see why not? 🤔 Try it and see…