Foros del Web » Programando para Internet » Javascript »

pausar video html5

Estas en el tema de pausar video html5 en el foro de Javascript en Foros del Web. Hola gente, tengo una duda... De que manera puedo pausar un video con la etiqueta VIDEO automaticamente, por ejemplo, en el segundo 15. Se trata ...
  #1 (permalink)  
Antiguo 25/03/2015, 11:45
Avatar de omar_gutierrez  
Fecha de Ingreso: febrero-2011
Mensajes: 144
Antigüedad: 13 años, 1 mes
Puntos: 2
pausar video html5

Hola gente, tengo una duda...

De que manera puedo pausar un video con la etiqueta VIDEO automaticamente, por ejemplo, en el segundo 15.

Se trata de un video interactivo, logre enviarlo a varios putos del video, ponerlo en el segundo "X". Ahora lo que se requiere es que se pause en un momento especifico.

Lo poco que he encontrado no me ha funcionado.
  #2 (permalink)  
Antiguo 25/03/2015, 12:03
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: pausar video html5

Cuando se dispare el evento playing, el cual se ejecuta cuando se inicia/reinicia la reproducción del vídeo, ejecuta un temporizador cíclico que cada segundo verifique el tiempo actual de reproducción del vídeo, el cual puedes obtener mediante la propiedad currentTime. Luego, dado a que el tiempo viene dado con milésimas, tomas la parte entera con la función parseInt y verificas si es igual a 15; de ser así, pausas la reproducción del vídeo con el método pause.

Código Javascript:
Ver original
  1. var video = document.getElementById("tuVideo"), temporizador;
  2.  
  3. video.addEventListener("playing", function(){
  4.     temporizador = setInterval(function(){
  5.         if (parseInt(video.currentTime) == 15){
  6.             clearInterval(temporizador);
  7.             video.pause();
  8.         }
  9.     }, 1000);
  10. }, false);

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 25/03/2015, 12:48
Avatar de omar_gutierrez  
Fecha de Ingreso: febrero-2011
Mensajes: 144
Antigüedad: 13 años, 1 mes
Puntos: 2
Respuesta: pausar video html5

Gracias por responder Alexis. Funciona excelente, hay disculpen si me tarde en regresar aqui, segui investigando el caso y di con informacion (http://stackoverflow.com/) que me sirvio.

Dejare el esqueleto del proyecto que tengo por si alguien lo llega a requerir

Código HTML:
<meta charset="utf-8">
    
<div style="width:720px; margin: 0 auto; padding:0; border:0; ">

<div id="MENU" style="display:none; position:relative; top: 100px; z-index:999; padding:0; border:0;">
<button id="maquila" style="color:#fff; background-color:#f00; width:140px; padding:0; border:0; margin:0;" onclick="maquilair()" type="button">Ir a maquila</button>
<button id="lejos" style="color:#fff; left: 315px; background-color:#f00; width:140px; padding:0; border:0; margin:0;" onclick="lejosir()" type="button">Ir Lejos</button>
<button id="lejos" style="color:#fff; left: 315px; background-color:#f00; width:140px; padding:0; border:0; margin:0;" onclick="altoteir()" type="button">Super alto</button>
<button id="repetir" style="z-index:99999; color:#fff; left: 315px; background-color:#f00; width:140px; padding:0; border:0; margin:0; display:none;" onclick="otravez()" type="button">¡OTRA VEZ!</button>
</div>
    <video id="myVideo" width="700" autoplay>
     
      <source src="http://player.vimeo.com/external/122806127.mobile.mp4?" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
    
</div>

<script src="//code.jquery.com/jquery-1.11.2.js"></script>
<script>
$(document).ready(function() {
    document.getElementById('myVideo').addEventListener("timeupdate", function() {
        if(this.currentTime > 2 & this.currentTime < 2.5) {
            $("#MENU").show();
            myVideo.pause();
        }
        if(this.currentTime > 3 ) {
            $("#MENU").hide();

        }
        if(this.currentTime > 54.5 ) {
            $("#MENU").hide();

        }
        if(this.currentTime > 135.5 ) {
            $("#MENU").show();
            $("#repetir").show();
            myVideo.pause();
        }

    });
    
     $("#repetir").click(function(){
        $("#repetir").hide();
         $("#MENU").hide();
     });
    
});
    
    

var vid = document.getElementById("myVideo");

function maquilair() { 
    vid.currentTime=94;
    vid.play();
};

function lejosir() { 
    vid.currentTime=34;
    vid.play();
}
function otravez() {
    vid.currentTime=0;
    vid.play();
}
function altoteir() {
    vid.currentTime=55;
    vid.play();
}
</script> 
  #4 (permalink)  
Antiguo 25/03/2015, 12:53
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 6 meses
Puntos: 145
Respuesta: pausar video html5

Cita:
Iniciado por omar_gutierrez Ver Mensaje
Dejare el esqueleto del proyecto que tengo por si alguien lo llega a requerir

Código HTML:
<div id="MENU" style="display:none; position:relative; top: 100px; z-index:999; padding:0; border:0;">
<button id="maquila" style="color:#fff; background-color:#f00; width:140px; padding:0; border:0; margin:0;" onclick="maquilair()" type="button">Ir a maquila</button>
<button id="lejos" style="color:#fff; left: 315px; background-color:#f00; width:140px; padding:0; border:0; margin:0;" onclick="lejosir()" type="button">Ir Lejos</button>
<button id="lejos" style="color:#fff; left: 315px; background-color:#f00; width:140px; padding:0; border:0; margin:0;" onclick="altoteir()" type="button">Super alto</button>
<button id="repetir" style="z-index:99999; color:#fff; left: 315px; background-color:#f00; width:140px; padding:0; border:0; margin:0; display:none;" onclick="otravez()" type="button">¡OTRA VEZ!</button>
</div> 
Todos esos estilos aplicados en HTML y no en CSS me dan dolor de cabeza.
__________________
¿Te sirvió la respuesta? Deja un +1
  #5 (permalink)  
Antiguo 25/03/2015, 13:18
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: pausar video html5

¡Olvidé el evento timeupdate!

Con eso evitas usar un temporizador cíclico. Lo demás se conserva.

Por cierto, como bien te dice NueveReinas, no es una buena práctica mezclar CSS con HTML de esa manera, para existen las hojas de estilos.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: html5, videos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 12:56.