call html5 fullscreen api from pixi.js - javascript

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();
}
}

Related

Fullscreen toggle doesn't work on iOS mobile/tablet (Safari, Chrome and Firefox)

I have a problem for a fullscreen mode in a webapp on iOS mobile device (iPhone and IPad, all versions).
I have a button which call a toggle fullscreen function. This function work on all devices other than iOS.
My function :
function toggleFullScreen(e) {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement && !window.navigator.standalone) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
$('body').css({'height': screen.height});
fullSreen = true;
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}else if(document.cancelFullScreen){
document.cancelFullScreen();
}
$('body').css({'height': 'auto'});
fullSreen = false;
}
}
It does not work on Safari, Chrome and Firefox on iOS mobile/iPad, but the function is call (i try it with some alert message). I do not understand why, thx in advance !
Please try the below code. It's working fine in my system in all browsers of the iPhone.
HTML
<div class="video-banner-div">
<video class="video-bg" id="home_banner_video" playsinline="" autoplay="true" preload="">
<source src="url_of_your_video.mp4" type="video/mp4">
</video>
</div>
JS
vid = $('.video-banner-div video').get(0); // get the element of video tag
$(".full-screen-icon").on("click", function () {
// on click of the button call the toggle function
toggleFullScreen();
});
function toggleFullScreen() {
if (vid.requestFullScreen) {
vid.requestFullScreen();
} else if (vid.webkitRequestFullScreen) {
vid.webkitRequestFullScreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.msRequestFullscreen) {
vid.msRequestFullscreen();
} else if (vid.webkitEnterFullscreen) {
vid.webkitEnterFullscreen(); //for iphone this code worked
}
}
You can verify at http://caniuse.com/fullscreen that iOS Safari does not offer a API for fullscreen, check this asnwer for more information
Full screen api HTML5 and Safari (iOS 6) . But html video elements can go fullscreen.
Take a look at https://brad.is/coding/BigScreen/ , is a good lib to handle fullscreen events.

White bottom & top bars on full screen in Chrome

I've Google my butt off and I haven't found a solution or a similar problem yet. (Maybe it's my Google Skills today) but I'm having a full-screen problem.
I'm using the code below to let my website go full screen.
function toggleFullscreen(elem) {
elem = 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();
}
}
}
But when you go full screen, you get a white bar on top, and a white bar below the actual website, like this.
I've tried different ways of solving it, using :full-screen in the css and using different methods: html5 or JavaScript.
Check out the website and problem on CodePen right here.
Thank you for your time, hopefully somebody has an answer to this very annoying problem.
Add the below to your css
:-webkit-full-screen
{
background-color: red;
}
Similarly you can add for moz and ms.
Please check this link for more details
Full Screen API Tutorial

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.");
}

Is it possible to disable the "You've gone full screen" notification in javascript or jquery?

I'm building a HTML5 game but if I set the game into fullscreen if my cursor on the top it shows that notification?
I use this to set it into fullscreen:
function toggleFullScreen() {
if (!document.fullscreenElement &&
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.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();
}
}
}
Thanks!
To the extent of my knowledge, this is not possible in javascript. The browser handles the showing of that notification to prevent websites from exploiting the user by going fullscreen without informing them, not showing them how to close it nor allowing them to.
Check out this answer for a bit more in-depth information:
https://superuser.com/questions/398945/disable-the-youve-gone-full-screen-notification-in-chrome
Also: https://groups.google.com/a/webmproject.org/forum/#!topic/webm-discuss/5vtRCwu50ZU
I believe that, by design, it is not possible so that an application cannot takeover the screen for nefarious purposes.
No, you cant..it's one of the default functionality of a browser. it's one of the security features implemented in browsers..
See more here https://groups.google.com/a/webmproject.org/forum/#!topic/webm-discuss/5vtRCwu50ZU

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()}}

Categories

Resources