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 Resposta 1

2

Para isso existe a Fullscreen API. Com ela você pode:

Aplicação

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.: Ainda se faz necessário o emprego dos prefixos dos browsers (webkit, moz...)

No caso acima apliquei a mudança ao vídeo no evento dblclick.

Espero ter ajudado.

6
  • Desculpe a ignorância, mas seu eu pegar esse codigo que vc me mandou e colocar no lugar da minha função expand1 era pra funcionar meu botão, ou eu tenho que fazer alterações?
    – Lawrence
    Commented 19/09/2016 às 0:31
  • A função toggle faz a alternância entre ativar e desativar a tela cheia. Se desejar isso pode colar a função em outro lugar e apenas chama-la dentro de expand1. Commented 19/09/2016 às 10:32
  • Sou iniciante em javascript e não entendi como implementar o codigo para fazer meu botão funcionar com o onclick
    – Lawrence
    Commented 19/09/2016 às 20:06
  • troquei o botão expand1 por toggleFullScreen e tirei a função expand1.
    – Lawrence
    Commented 19/09/2016 às 20:14
  • @lawrence irei editar a resposta de modo mais claro assim que possível, agora estou pelo celular. Commented 20/09/2016 às 1:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .