Animate CC HTML5-切换全屏

Question

I have this code (below) on a buton to force my HTML5 game to fullscreen, but I'd like to have it turn back also with the button - right now it only works using ESC key. Is it possbile?

this.fsbtn.addEventListener("click", doFullscreen);

function doFullscreen() {
    var i;
    var elem = document.getElementById("animation_container");
    var fs = ["requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen", "msRequestFullscreen"];

    for (i = 0; i < 4; i++) {
        if (elem[fs[i]]) {
            elem[fs[i]]();
            break;
        }
    }
}

Answer 1

Sure it's possible. Change your doFullscreen function to a toggle one that checks if it's fullscreen or not:

 function toggleFullscreen(event) { var element = document.body; if (event instanceof HTMLElement) { element = event; } var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false; element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function () { return false; }; document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function () { return false; }; isFullscreen ? document.cancelFullScreen() : element.requestFullScreen(); } 

Answer 2

Read the documentation here for fullscreen API

You can exit from fullscreen mode using functions listed below(for more read documentation)

In JS/HTML code you can add button with absolute position and high z-index. Write new click listener for added button and run cancelFullscreen function, that's all.

Example JS function for FullScreen mode:

  function toggleFullScreen() { if (!document.mozFullScreen && !document.webkitFullScreen) { if (videoElement.mozRequestFullScreen) { videoElement.mozRequestFullScreen(); } else { videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.mozCancelFullScreen) { videoElement.mozCancelFullScreen(); } else { videoElement.webkitCancelFullScreen(); } } } 

Working example you can see here: https://developer.mozilla.org/samples/domref/fullscreen.html