pausar video html5

[omar_gutierrez]

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.

[Alexis88]

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:

var video = document.getElementById("tuVideo"), temporizador;
 
video.addEventListener("playing", function(){
    temporizador = setInterval(function(){
        if (parseInt(video.currentTime) == 15){
            clearInterval(temporizador);
            video.pause();
        }
    }, 1000);
}, false);
 

Saludos

[omar_gutierrez]

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> 

[NueveReinas]

Iniciado por omar_gutierrez

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.

[Alexis88]

¡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