Fullscreen in the browser

#1

Hi,
I need to give users the possibility to set fullscreen when running an application in the browser (HTML5 target), locking the rotation to landscape. How do I achieve this?

I’d like to know also if it is possible to tell the url and tabs header, and the controls footer in iOS to go away when running the application: I noticed that they go away whenever they want, rotating the cell/tablet or doing something, I didn’t understand exactly when this happens, but I’d like to force this.

#2

I’m not sure how you’d go about automatically setting fullscreen in a browser (I think it has to be a user triggered) but I came across this tutorial on how to handle orientation:

The tutorial uses phaser but the ideas there should be applicable to haxe/openfl (especially if you’re using the browser package that comes with haxe).

#3

Yes, fullscreen must be triggered by user.
I will have a look at Emanuele’s tutorial as soon as possible.

#4

Same hack that the assets loading topic : browser stuff is native html/css/javascript.

To lock the orientation (and master how your app behaves on mobile), you could use this.
I guess the browser support is better now than it was when this post was written.

To achieve real fullscreen, there’s an Html5 Javascript API that works great on decently recent browsers.
It’s really simple to use, and works great.
You now just have to figure how to trigger it from your .hx app… but you could just embed the js code in your click callback on the “fullscreen” button.

(How to insert native javascript in openfl, for anyone who’d read this in the future).

#5

Sadly neither API is fully supported by all mobile browsers :
http://caniuse.com/#feat=screen-orientation
http://caniuse.com/#feat=fullscreen

Maybe by the end of this year, hopefully sooner, we’ll see greater adoption of these much needed APIs.

#6

I will add this feature in the future… :pensive:

#7

Yes, that’s the sad journey of html5 game devs…
But one day, oh one day support will be perfect across browsers and all our dreams’ll come true :smile:

#8

If I rememeber, the only way to have fullscreen on mobile devices is to make your web-page “app friendly”.

It takes a meta in the html header, and a path to an icon :

<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />

And then it requires the user to add your page to his homepage.
Then when he launches your game like he would of a real native app, he’ll have it fullscreened…

I wonder why people don’t use that feature more often !

#9

I hope this will happen before a new technology will destroy HTML5…

I don’t know this method, please can you explain it?

#10

Here are some details.
The “Hiding Safari User Interface Components” paragraph.

It’s done with the

<meta name="apple-mobile-web-app-capable" content="yes" />

trick.

#11

Looks like I have to manage all browser differently… I will check it.

#12

Currently “fullscreen” is a flag that on HTML5 assumes it scales to the full screen, but I’d like to see this improved more within Lime, open to contributions/suggestions, but we have to bear in mind what different browsers do support

#13

Hi Gildas !

I’m trying to get this Fullscreen API to work, but even with the ‘how to insert native js’ link example I’m still failing to get it to work.

Do you have an example of how you’ve integrated it successfully ? I keep getting the error " Class<js.Lib> has no field document " even though I’ve imported js.Lib

Any help much appreciated ! - I’m such a jsnoob :frowning:

-Jerry

#14

I would try starting here, in Lime:

Perhaps you can use element.requestFullScreen () or something like that