How do I create a fullscrenn button for my video player?

Question

How do I create a fullscrenn button for my video player?

Asked 8 years, 2 months ago

Viewed 89 times

2

<!doctype html>
<html>
    <head>
        <title>Tag video</title>
        <meta charset="utf-8" />
        <script language="Javascript">
        window.onload = function(){
            var b1 = document.getElementById("src1");
            var b2 = document.getElementById("src2");
            var b3 = document.getElementById("src3");
            var b4 = document.getElementById("src4");

            b1.addEventListener("click",changeSrc);
            b2.addEventListener("click",changeSrc);
            b3.addEventListener("click",changeSrc);
            b4.addEventListener("click",changeSrc);
        }

        function changeSrc(event){
            console.log(event);
            console.log(event.target.value);
            var video = document.getElementById("Video1");
            video.src = event.target.value;
        }

        function vidplay1() 
        {
            var video = document.getElementById("Video1");
            var button = document.getElementById("play");
            if (video.paused) 
            {
            video.play();
            button.textContent = "II";
            } 
            else 
            {
            video.pause();
            button.textContent = "➤";
            }
        }

        function restart1() 
        {
            var video = document.getElementById("Video1");
            video.currentTime = 0;
        }

        function skip1(value) 
        {
            var video = document.getElementById("Video1");
            video.currentTime += value;
        } 

        function expand1() 
        {
        //2do;
        }

        </script>       
    </head>
    <body>
        <table align="center">
            <tr>
                <td>
                    <video controls width="502" height="360" id="Video1">
                        <source src="video1.webm" type=video/webm>
                    </video>    
                </td>
            </tr>

            <tr>
                <td align="center">
                    <div id="PLAYER1">                      
                        <button id="restart" onclick="restart1()">↺</button> 
                        <button id="rew" onclick="skip1(-10)">↶</button>
                        <button id="play" onclick="vidplay1()">➤</button>
                        <button id="fastFwd" onclick="skip1(10)">↷</button>
                        <button id="exp" onclick="expand1()">[x]</button>
                    </div>
                </td>

                <button id="src1" value = "video1.webm"><img src="video1.png" width="310" height="220" /></button> 
                <button id="src2" value = "video2.webm"><img src="video2.png" width="310" height="220" /></button>
                <button id="src3" value = "video3.webm"><img src="video3.png" width="310" height="220" /></button>
                <button id="src4" value = "video4.webm"><img src="video4.png" width="300" height="220" /></button>

            </tr>
        </table>
    </body>
<html>

1 answer

Browser other questions tagged javascript html5 fullscreen player

You are not signed in. Login or sign up in order to post.

by Samir Braga • **10,016** points · Answer 1 · 2016-09-18T22:49:51+00:00

For that there is the Fullscreen API. With her you can:

Check that Fullscreen mode is enabled (fullscreenEnabled)
Know if there is any element which in full screen and which is (nodeName) (fullscreenElement)
Activate the mode (requestFullscreen)
Get out of shape (exitFullscreen or cancelFullScreen in firefox)
In addition to using some events like the onfullscreenchange

Applying

function toggleFullScreen() {
  if(!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement)){
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.msRequestFullscreen) {
        video.msRequestFullscreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
      } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
      }
    }else{
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullscreen) {
        document.mozCancelFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
}

video.addEventListener('dblclick', toggleFullScreen)

Obs.: It is still necessary to use the prefixes of the browsers (Webkit, Moz...)

In the above case I applied the change to the video at the event dblclick.

I hope I’ve helped.