Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to toggleFullScreen when window orientation? #484

Open
huxiaozhong opened this issue Nov 12, 2017 · 4 comments
Open

how to toggleFullScreen when window orientation? #484

huxiaozhong opened this issue Nov 12, 2017 · 4 comments

Comments

@huxiaozhong
Copy link

huxiaozhong commented Nov 12, 2017

Description

how to toggleFullScreen when window orientation?
in window.addEventListener ,this controller.API.toggleFullScreen(); cant work,console log:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

but in $scope.stateChange it can work!!!! why ,how to fix it?

Live Demo

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function ()
{
if ((window.orientation === 90 || window.orientation === -90)
&& controller.API !== null
&& controller.API.currentState === "play"
&& !controller.API.isFullScreen)
{
controller.API.toggleFullScreen();
}
}, false);
$scope.stateChange = function (state)
{
if ((window.orientation === 90 || window.orientation === -90)
&& controller.API !== null
&& state === "play"
&& !controller.API.isFullScreen)
{
controller.API.toggleFullScreen();
}
}

@kfeinUI
Copy link
Contributor

kfeinUI commented Nov 12, 2017 via email

@huxiaozhong
Copy link
Author

i khonw this now, but how fix my problem? how to toggleFullScreen when window orientation?

@kfeinUI
Copy link
Contributor

kfeinUI commented Nov 22, 2017

Actually spent some time experimenting with this during the last week. Some observations:

  • You can't make the video element full screen request because it has a security restriction requiring a touch gesture.
  • The inline playback route of applying styling to have to player fill the screen on orientation naturally doesn't have the security issue. However, there are some other big limitations/issues to content with that ultimately became blockers for me.
  • One problem you have to content with is the zoom/scaling. Both iOS Safari and Android Chrome have disabled programmatic means of resetting the zoom. No way around this. I made progress at scaling based on the window state, but it's tricky.
  • The browser chrome is a big problem. There's no reliable way to get rid of it and keep it out of the way. Safari doesn't support the Full Screen API at all. Chrome does, but it's not ideal. Depending on your device, the chrome can take up a good chunk of the visible space. Really kills the practicality of the experience.
  • Safari has an approximately 44px tall "void" along the bottom of the screen that both breaks touch events on your page and triggers the browser chrome surfacing.

In summary, the browser vendors (and Apple in particular) go out of their way to cripple the browser experience. Not too difficult to read between the lines to see that they're trying to steer you into native apps. Some of these restrictions are loosened up when running through a native app context. While they did enable inline playback, it seems they did so chiefly with the animated gif replacement use case in mind.

@bennypowers
Copy link

Hey there
you need to do this in a handler for the screen.orientation.onchange event. You can't do it in window.onorientationchange

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants