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

Navigation
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>
    
asked by anonymous 18.09.2016 / 22:39

1 answer

2

There is a Fullscreen API . With it you can:

Application 

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)

Note: It is still necessary to use the browser prefixes (webkit, moz ...)

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

I hope I have helped.

    
19.09.2016 / 00:49
Xml Tag base64Binary C # MySQL table with lots of data