Develop Reference

Canvas fullscreen on mobile devices causes power down

How can i make a Canvas Element fullscreen and bypass the power saving feature of the mobile device. My canvas is playing a video but the mobile phone go's into power saving mode after a few seconds. Is there some setting somewhere?
this is my fullscreen function
let openFullscreen = (elem) => {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}

A possible reason why this could be happening is because the video is muted

Android Chrome hides address bar after exiting fullscreen with javascript after rotating screen (bug?)

I am using this javascript to make a website go fullscreen and exit fullscreen:
function ToggleFullscreen() {
elem = document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
The problem is if the user has rotated their phone from landscape to portait at all during the pageview when you exit fullscreen the address bar doesn't reappear. This seems to be a bug as it works perfectly if they have not rotated the device prior. To get it back the user can ussually scroll up on page. However the content on the site I am currently making requires that scrolling is disabled so the user can't do that. So to them it just seems like the site has messed up and lost their address bar.
Can anybody think of a way to get the address bar back? I tried using "scrollTop = 0" and that didn't help. I even tried "scrollTop = 20" then after a delay "scrollTop = 0" and still no good. One thing that does bring it back is using "alert('message');". As you can imagine I don't want to make a message pop up every time somebody exits fullscreen though just incase they are in this state. Are there any other javascript functions that could potentially bring the address bar back just like an alert does? Or anything I could try to avoid this problem in the first place?

The only solution I found is to exit full screen mode after a delay after screen rotation:
screen.orientation.addEventListener('change', () => {
if (screen.orientation.type.startsWith('landscape')) {
document.documentElement.requestFullscreen();
}
else if (document.fullscreen) {
setTimeout(() => document.exitFullscreen(), 500);
}
});

Margin when in fullscreen

Starting fullscreen with Chrome by using onInputDown event for Text objects in Phaser enables fullscreen with margin on all sides. I found in Phaser examples that the same thing is happening with onDown event for game.input. http://phaser.io/examples/v2/display/fullscreen
I suspected my computer might be at fault but after asking a friend to try the example above he experienced something similar. The only difference was the background created by the margins.
Oddly enough if I were to call the same function that the onInputDown event from the Text object was calling but from a Button object instead there will be no margins. A proper fullscreen. Calling said function from an event listener added to html tags <p>, <label> and <button> etc. also works properly.
My question is: Why are margins created when enabling fullscreen in the way I explained in my first paragraph? Is there a way to remove those margins except for calling the function from a different source? If you get a proper fulllscreen from the example link using Chrome please add that in your answer.
//My fullscreen function
function ToggleFullScreen()
{
var elem = document.documentElement;
//Check if document is already in full screen or not.
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} //If document is not already in full screen: Check if the document has the ability to go fullscreen.
else if(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled ||document.msFullscreenEnabled)
{
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}//If the document can not go full screen: Alert the user.
else
window.alert("Sorry. Your device or brower does not support full screen.");
}

call html5 fullscreen api from pixi.js

I would like to build a site using pixi.js
Using native html5 code I can call the fullscreen api of the browser by calling the below function onclick
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
How can I make the screen fullscreen via pixi? Can anyone give me a sample?

Not sure if you're asking how to add click listeners in PIXI, or how to request full screen from a non-DOM element, such as a PIXI Sprite.
For the former, see this example: http://www.goodboydigital.com/pixi-js-gets-interactive/
Then you can do fullscreen the same way as you did above:
mySprite.click = function(e){
if(document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if(document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if(document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen();
} else if(document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
}
}

How can I trigger jQuery events when entering or exiting fullscreen?

I have a Fullscreen button on my page. I want to use it to make a target element fullscreen. I would like specific jQuery events (fullscreenOn/fullscreenOff) when fullscreen is entered and exited. I would also like the fullscreen button to be removed if the browser doesn't support fullscreen.
The only code I have is from the MDN article:
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
But this doesn't provide on/off-specific events. How can I do that?

I wrote a jQuery function:
$.fn.fullscreen = function(target){
var elem = $(target)[0]; $d = $(document);
if(elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen){
function FSon(){ $d.trigger('fullscreen').trigger('fullscreenOn').data('fullscreen',true); }
function FSoff(){ $d.trigger('fullscreen').trigger('fullscreenOff').data('fullscreen',false); }
$d.data('fullscreen',false)
.on('fullscreenchange',function(){
if(document.fullscreen) FSon();
else FSoff();
}).on('mozfullscreenchange',function(){
if(document.mozFullScreen) FSon();
else FSoff();
}).on('webkitfullscreenchange',function(){
if(document.webkitIsFullScreen) FSon();
else FSoff();
}).on('MSFullscreenChange',function(){
if(document.msFullscreenElement) FSon();
else FSoff();
});
this.click(function(){
if(elem.requestFullscreen){
elem.requestFullscreen();
}else if(elem.mozRequestFullScreen){
elem.mozRequestFullScreen();
}else if(elem.webkitRequestFullscreen){
elem.webkitRequestFullscreen();
}else if(elem.msRequestFullscreen){
elem.msRequestFullscreen();
}
});
}else{
this.remove();
}
};
It provides the following features:
Cross-browser (Unless the browser doesn't support requestFullscreen or its prefixed methods)
Issues events on $(document): fullscreen for on/off and fullscreenOn/fullscreenOff.
Adds jQuery .data to $(document): fullscreen is a boolean value.
You can call it like so:
$("#myButton").fullscreen("#elementToMakeFullscreen");
Here is the function compressed:
function n(){$d.trigger("fullscreen").trigger("fullscreenOn").data("fullscreen",true)}function r(){$d.trigger("fullscreen").trigger("fullscreenOff").data("fullscreen",false)}$d.data("fullscreen",false).on("fullscreenchange",function(){if(document.fullscreen)n();else r()}).on("mozfullscreenchange",function(){if(document.mozFullScreen)n();else r()}).on("webkitfullscreenchange",function(){if(document.webkitIsFullScreen)n();else r()}).on("MSFullscreenChange",function(){if(document.msFullscreenElement)n();else r()});this.click(function(){if(t.requestFullscreen){t.requestFullscreen()}else if(t.mozRequestFullScreen){t.mozRequestFullScreen()}else if(t.webkitRequestFullscreen){t.webkitRequestFullscreen()}else if(t.msRequestFullscreen){t.msRequestFullscreen()}})}else{this.remove()}}