How To Use HTML DOM FullscreenEnabled Method In JavaScript

Posted By Bajarangi soft , Posted On 29-09-2020

In Java Script we can make full screen view of video on click of button today we are going to discuss about how to make full screen view for video using java script methods

How To Use HTML DOM FullscreenEnabled Method In JavaScript

The fullscreenEnabled() method returns a Boolean value indicating whether the document can be viewed in fullscreen mode.

The fullscreenEnabled() method returns true if fullscreen mode is available, otherwise false. Note: This method requires specific prefixes to work in different browsers (see Browser Support below).

Tip: Use the element.requestFullscreen() method to view an element in fullscreen mode.

Tip: Use the element.exitFullscreen() method to cancel fullscreen mode.

Syntax and Usage

document.fullscreenEnabled()

when return Value: A Boolean value, indicating whether the document can be viewed in fullscreen mode:

true - The document can be viewed in full-screen mode
false - The document can not be viewed in full-screen mode

Example(1)

<script>
    /* Get the element you want displayed in fullscreen */
    var elem = document.getElementById("myvideo");

    /* Function to open fullscreen mode */
    function view_Fullscreen() {
        /* If fullscreen mode is available, show the element in fullscreen */
        if (
            document.fullscreenEnabled || /* Standard syntax */
            document.webkitFullscreenEnabled || /* Chrome, Safari & Opera */
            document.mozFullScreenEnabled || /* Firefox */
            document.msFullscreenEnabled /* IE/Edge */
        ) {

            /* Show the element in fullscreen */
            elem.webkitRequestFullscreen();
            if (elem.requestFullscreen) {
                elem.requestFullscreen(); /* Standard syntax */
            } else if (elem.mozRequestFullScreen) { /* Firefox */
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE/Edge */
                elem.msRequestFullscreen();
            }

        }
    }
</script>

In above example displaying video in full screen view on click of button

Example(2)

<script>
    /* Get the element you want displayed in fullscreen */
    var elem = document.getElementById("myvideo");

    /* Function to open fullscreen mode */
    function openFullscreen() {
        /* If fullscreen mode is available, show the element in fullscreen */
        if (
            document.fullscreenEnabled || /* Standard syntax */
            document.webkitFullscreenEnabled || /* Chrome, Safari & Opera */
            document.mozFullScreenEnabled || /* Firefox */
            document.msFullscreenEnabled /* IE/Edge */
        ) {

            /* Show the element in fullscreen */
            elem.webkitRequestFullscreen();
            if (elem.requestFullscreen) {
                elem.requestFullscreen(); /* Standard syntax */
            } else if (elem.mozRequestFullScreen) { /* Firefox */
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE/Edge */
                elem.msRequestFullscreen();
            }

        }
    }
</script>

In above example Using prefixes for cross-browser code

Complete code for HTML DOM FullscreenEnabled Method In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>FullscreenEnabled Method In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>FullscreenEnabled Method In JavaScript</h1>
    </div>
    <br>
    <div class="well">

        <p>Click on the button to open the video in fullscreen mode.</p>
        <br>
        <button class="btn btn-primary" onclick="view_Fullscreen();">Open Video in Fullscreen Mode</button>
        <br>
        <p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
        <br>
        <video width="50%" controls id="myvideo">
            <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
            <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
            Your browser does not support the video tag.
        </video>

    </div>
    <br>
</div>
</body>
</html>
<script>
    /* Get the element you want displayed in fullscreen */
    var elem = document.getElementById("myvideo");

    /* Function to open fullscreen mode */
    function view_Fullscreen() {
        /* If fullscreen mode is available, show the element in fullscreen */
        if (
            document.fullscreenEnabled || /* Standard syntax */
            document.webkitFullscreenEnabled || /* Chrome, Safari & Opera */
            document.mozFullScreenEnabled || /* Firefox */
            document.msFullscreenEnabled /* IE/Edge */
        ) {

            /* Show the element in fullscreen */
            elem.webkitRequestFullscreen();
            if (elem.requestFullscreen) {
                elem.requestFullscreen(); /* Standard syntax */
            } else if (elem.mozRequestFullScreen) { /* Firefox */
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE/Edge */
                elem.msRequestFullscreen();
            }

        }
    }
</script>

Related Post