Fullscreen in HTML5

[TheHENOOB]

HaxeFlixel supports fullscreen in Neko, CPP and Flash but not on HTML5, for people that are looking into making a game fullscreen in HTML5 here is a code example:

function toggleFullscreen()
{
	#if desktop
	FlxG.fullscreen = !FlxG.fullscreen;
	#elseif html5
	var screen = Browser.document.getElementById("openfl-content");

	Browser.document.fullscreenElement != null ? Browser.document.exitFullscreen() : screen.requestFullscreen();
	#end
}

It works on a local server and on newgrounds

Notes:

• On the project.xml in window settings, resizable should be set to true or else the game will be on the top left in the screen and not centered <window if="html5" resizable="true" />
• Requires import js.Browser;
• Only works if the screen is focused (or the user clicked on the canvas)
• For Haxe Beginners: Browser.document.fullscreenElement != null ? Browser.document.exitFullscreen() : screen.requestFullscreen(); is the same as writing:

if (Browser.document.fullscreenElement != null)
{
	Browser.document.exitFullscreen();
}
else
{
	screen.requestFullscreen();
}

More info:
https://gist.github.com/TheHENOOB/386d7aa395acd1c3d2f0872e639cf2d4
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

[Geokureli]

You can fullscreen on html5 there are browser restrictions involved here to prevent malicious behavior. You need to switch to fullscreen from user imput, you can't just do it whenever you want.

It should work if you make a FlxButton that triggers FlxG.fullScreen = true but it won't work for something like: if (FlxG.mouse.pressed) FlxG.fullScreen = true;. I believe this is because fullscreen needs to be triggered while the browser is dispatching an input event. the same is true for opening URLs

[Geokureli]

nevermind, apparently FlxG.fullScreen = true works for me at any time on chrome and brave as long as I've clicked the screen. what browser were you testing this on?

[TheHENOOB]

Chrome, Firefox and Edge

[TheHENOOB]

I thought it didn't work on HTML5 because I used the documentation on FlxG as a reference, telling that fullscreen only works on Flash, CPP and Neko:

	/**
	 * Use this to toggle between fullscreen and normal mode. Works on CPP, Neko and Flash.
	 * You can easily toggle fullscreen with e.g.: `FlxG.fullscreen = !FlxG.fullscreen;`
	 */
	public static var fullscreen(get, set):Bool;

[Geokureli]

we should update that