Problems when restoring from full-screen view

[jrw95]

Found during a test pass of the new videojs skin.

STR:

1. Copy the index.html.example page to index.html and load it in a browser. Note that the player is not loaded in full-window mode.
2. Start playback, and click the full screen button.
3. In full-screen mode, click the full-screen button again to restore to the previous mode.

Expected:
The player restores back to its non-full-window mode.
The full-screen button changes to an arrows-out icon.

Actual:
The player restores instead to full-window mode.
The button remains an arrows-in icon.

The player in the videojs.com home page does not exhibit this behavior. That player does restore to the non-full-window mode as expected, and the icon does change to an arrows-out icon.

[kholbrook-sonardesign]

Actually I see a similar issue with the player on the video.js website.
It does not restore from fullscreen mode properly and the video is the wrong size.

The behavior changes based on whether you initiate fullscreen mode toggles from the control bar button or the browsers fullscreen permission dialog. Using ESC does not restore properly, but using the fullscreen control button does.

This worked in prior versions.

[heff]

@kholbrook-sonardesign Which browser/platform?

[kholbrook-sonardesign]

None of these work correctly.

FireFox 20.0.1 Win7
Chrome 26.0.1410.64 Win7
Opera12.14 Win7 - (does not enter fullscreen from control bar)
Safari 5.1.7 Win7
IE 10.0.9200 Win7 - (does not enter fullscreen correctly)

[heff]

Ah, I see. Hitting the esc button to exit fullscreen is broken.

On May 9, 2013, at 1:51 PM, Kevin notifications@github.com wrote:

None of these work correctly.

FireFox 20.0.1 Win7
Chrome 26.0.1410.64 Win7
Opera12.14 Win7 - (does not enter fullscreen from control bar)
Safari 5.1.7 Win7

—
Reply to this email directly or view it on GitHub.

[jaredwalters]

I can confirm the same problem in Mac/Chrome v26 and Firefox v20.

[johnrees]

Same issue here. I've recorded a quick video of what's happening http://www.youtube.com/watch?v=gilKeCj6g3E

OS X: Version 10.8.2
Chrome: Version 26.0.1410.65

Same issue occurring in every browser I've tested. In Safari it actually shrinks back correctly, but then immediately opens fullsize within the browser window.

[creichlin]

the fullscreenchange event does not get triggered when pressing esc so the .vjs-fullscreen class is not removed in player.js:395. a trigger('fullscreenchange') added to player.js:602 seems to solve the problem but i haven't tested it properly so far.

[tejinderss]

Same issue on OS x 10.8.2 with safari Version 6.0.4 (8536.29.13) and Chrome Version 26.0.1410.65. Even on the homepage if i click esc on fullscreen mode it goes to full-window mode as opposed to normal window model. Looking forward to a fix.

[Miserlou]

Not sure if this is related, but my behavior from quitting full screen results in

Link: https://openwatch.net/v/8/

Firefox and Chrome, Ubuntu 12.04

Started as a 640x480 video, became full screen, then if it comes back and it's huge!

[ravionrails]

Same on my ubuntu machine / chrome.
After Full screen,
I hit exit Full Screen browser button
It result in Full window
and then I use Full screen link on video, it goes to Full Screen and then
I hit again the same link and it revert back to normal

[mbusch]

+1 here

Tested with:

• Windows 7/8 x64, Chrome v26/Firefox v21
• Ubuntu 12.04 x64, Chrome v26/Firefox v21

[benjipott]

+1 here

Tested with:

Windows 7/8 x64/x32, Chrome v27

[ravionrails]

Use Browser Exit full screen button and not button embed in video player to exit full screen

[mbusch]

@ravionrails For me it's the exact opposite: If I use the ESC button (so the exit full screen button of the respective browser) I discover the mentioned behaviour. Everything is fine if I use the player button.

[ravionrails]

ESC button triggers Browser button and it leads to Full screen in browser window, it doesn't resizes to original position, is there any solution for this bug.

[kylegilman]

I have a WordPress plugin that uses Video.js as a player and with some help from John Dyer I was able to make a hack for this problem by removing the vjs-fullscreen class in browsers that use the fullscreen API. It seems like only browsers that don't support the real fullscreen API need that class. Here's the relevant code I used:

player.on('fullscreenchange', function(){

    var
        fullScreenApi = {
            supportsFullScreen: false,
            isFullScreen: function() { return false; },
            requestFullScreen: function() {},
            cancelFullScreen: function() {},
            fullScreenEventName: '',
            prefix: ''
        },
        browserPrefixes = 'webkit moz o ms khtml'.split(' ');

    // check for native support
    if (typeof document.cancelFullScreen != 'undefined') {
        fullScreenApi.supportsFullScreen = true;
    } else {
        // check for fullscreen support by vendor prefix
        for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
            fullScreenApi.prefix = browserPrefixes[i];
            if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
                fullScreenApi.supportsFullScreen = true;
                break;
            }
        }
    }

    if ( fullScreenApi.supportsFullScreen == true ) { jQuery(player).removeClass('vjs-fullscreen'); }

});

[heff]

I have a fix in a branch if anyone wants to verify it before I push it out to the CDN. heff@88a75fd

[Miserlou]

When will the fix be pushed to CDN?

[heff]

It's available now at http://vjs.zencdn.net/4.0.3/video.js

Doing more testing before overwriting /4.0/

On May 28, 2013, at 3:40 PM, Rich Jones notifications@github.com wrote:

When will the fix be pushed to CDN?

—
Reply to this email directly or view it on GitHub.