1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Como salir de pantalla completa

Tema en 'Jquery' comenzado por DragoMC, 10 de Septiembre de 2017.

  1. DragoMC

    DragoMC Nuevo Miembro

    Se incorporó:
    14 de Mayo de 2016
    Mensajes:
    8
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Buenas chicos mi problema es que pude lograr poner en pantalla completa un section pero no se como hacer para salir de la pantalla completa con un boton.
    Aquí esta el código
    HTML:
    <section class="video" id="cont_rep">
        <video poster="lg.png" id="reproductor">
          <source src="video.mp4" type="video/mp4">
        </video>
        <nav>
          <div class="tiempo" onclick="buscar(event);">
            <div class="slider" id="slider">
              <i class="fa fa-heart" aria-hidden="true"></i>
            </div>
            <div id="pg_pass">

            </div>
          </div>
          <div class="botones">
            <button type="button" id="rp" onclick="repause()"><i class='fa fa-play' aria-hidden='true'></i></button>
            <span id="t_video"></span>
            <button type="button" id="fs" onclick="fullscreen()"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
          </div>
        </nav>
      </section>
    Código (Javascript):
    var video = document.getElementById('reproductor');
      var slider = document.getElementById('slider');
      var pausa = document.getElementById('rp');
      var pg_pass = document.getElementById('pg_pass');
      var duracion;
      var t = setInterval(vidDur, 500);
      function vidDur() {
        if (video.readyState > 0) {
          duracion = video.duration;
          clearInterval(t);
        }
      }

      function repause() {
        if (video.paused) {
          $('#rp').children('i').toggleClass('fa-pause');
          $('#rp').children('i').toggleClass('fa-play');
          video.play();
          var tmp = setInterval(posicion, 25);
        } else {
          $('#rp').children('i').toggleClass('fa-pause');
          $('#rp').children('i').toggleClass('fa-play');
          video.pause();
          clearInterval(tmp);
        }
      }

      function posicion() {
        var tiempomax = $('.tiempo').width();
        slider.style.left = (video.currentTime * tiempomax)/duracion+"px";
        pg_pass.style.width = ((video.currentTime * tiempomax)/duracion)+8+"px";
      }

      function buscar(event) {
        var tiempomax = $('.tiempo').width();
        var mx = event.clientX;
        var x = mx-8;
        slider.style.left = x+"px";
        video.currentTime = (x * duracion)/tiempomax;
      }

      var div = document.getElementById('cont_rep');
      function fullscreen() {
        if ($('#fs').children('i').hasClass('fa-compress')) {
          if (div.cancelFullScreen) {
            div.cancelFullScreen();
          } else if (div.mozCancelFullScreen) {
            div.mozCancelFullScreen();
          } else if (div.webkitCancelFullScreen) {
            div.webkitCancelFullScreen();
          }
        } else {
          if(div.requestFullscreen){
            div.requestFullscreen();
            $('#fs').children('i').toggleClass('fa-arrows-alt');
            $('#fs').children('i').toggleClass('fa-compress');
          }
          else {
            div.webkitRequestFullscreen();
            $('#fs').children('i').toggleClass('fa-arrows-alt');
            $('#fs').children('i').toggleClass('fa-compress');
          }
        }
      }
    Ese es todo mi código, espero me puedan ayudar
     

Comparte esta página