call html5 fullscreen api from pixi.js

Question

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?

Answer 1

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