CODEWITHSUNDEEP
javascript
Nadir
Nadir

Reputation: 15

Implement the opposite of fullscreen in Javascript

I use this code to implement button to be in fullscreen, it's work fine. I search to do the opposite, how can I do that ? Thank's for your helping.

HTML

            <button type="button" id="full-screen" class="full-screen">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M32 0h-13l5 5-6 6 3 3 6-6 5 5z"></path>
                    <path d="M32 32v-13l-5 5-6-6-3 3 6 6-5 5z"></path>
                    <path d="M0 32h13l-5-5 6-6-3-3-6 6-5-5z"></path>
                    <path d="M0 0v13l5-5 6 6 3-3-6-6 5-5z"></path>
                </svg>
            </button>

JavaScript var fullScreenButton = document.getElementById("full-screen");

            // Event listener for the full-screen button
            fullScreenButton.addEventListener("click", function()
            {
                if (player.requestFullscreen)
                {
                    player.requestFullscreen();
                }
                else if (player.mozRequestFullScreen)
                {
                    player.mozRequestFullScreen(); // Firefox
                }
                else if (player.webkitRequestFullscreen)
                {
                    player.webkitRequestFullscreen(); // Chrome and Safari
                }
            });

Upvotes: 1

Views: 1135

Answers (2)

Nadir
Nadir

Reputation: 15

The answer which works with my exemple.

            // Event listener for the full-screen button
            fullScreenButton.addEventListener("click", function()
            {
                if (player.requestFullscreen)
                {
                    player.requestFullscreen();
                }
                else if (player.mozRequestFullScreen)
                {
                    player.mozRequestFullScreen(); // Firefox
                }
                else if (player.webkitRequestFullscreen)
                {
                    player.webkitRequestFullscreen(); // Chrome and Safari
                }
            });


            // Event listener for the full-screen button
            normalScreenButton.addEventListener("click", function()
            {
                if(document.exitFullscreen)
                {
                    document.exitFullscreen();
                }
                else if(document.mozCancelFullScreen)
                {
                    document.mozCancelFullScreen();
                }
                else if(document.webkitExitFullscreen)
                {
                    document.webkitExitFullscreen();
                }
            });

Upvotes: 0

JSchirrmacher
JSchirrmacher

Reputation: 3364

You could use this function:

function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

Upvotes: 5

Related Questions