1

tengo un vídeo, debajo muestro el instante de reproducción y debajo tengo una imagen. Bien, necesito que esa imagen vaya cambiando en ciertos momentos concretos del vídeo y es esta última parte la que no logro sacar.

HTLM:

<video id="player" controls width="720" poster="img/ImagenInicial.png" loop>
<h2>Instante de reproducción: <span id="tiempo">X</span></h2>

JavaScript:

window.addEventListener("load", segundos);
function segundos() {
    let video = document.getElementById("player");
    video.addEventListener("timeupdate",function(){                  
    document.getElementById("tiempo").innerHTML = video.currentTime;});}

He probado muchas cosas, como esto:

//<button onclick="plause()" onclick="sincro()">Reproducir/Pausar</button>
function sincro(){
    let segundo = ["0", "7", "12", "17", "23", "27", "31", "32"];
    let imagenes = ["img/Imagen01_000.jpg", "img/Imagen02_007.jpg", "img/Imagen03_012.jpg", "img/Imagen04_017.jpg", "img/Imagen05_023.jpg", "img/Imagen06_027.jpg", "img/Imagen07_031.jpg", "img/Imagen08_032.jpg"];
    let video = document.getElementById("player");
    for (i=0; i<segundo.length; i++) {
        if (segundo[i] = video.currentTime){
            let nuevaImg = imagenes[i];}
        document.getElementById("diapo").src = nuevaImg;}

O esto:

  let video = document.getElementById("player");
        video.addEventListener("timeupdate",function(){
            if (video.currentTime = 0) {
                document.getElementById("diapo").src = "../img/Imagen01_000.jpg";
            }
        });
        video.addEventListener("timeupdate",function(){
            if (video.currentTime = 7) {
                document.getElementById("diapo").src = "./img/Imagen02_007.jpg";
            }
        });

        //...

        video.addEventListener("timeupdate",function(){
            if (31 < tiempo){
                document.getElementById("diapo").src = "./img/Imagen08_032.jpg";
            }
        });

Y nada me funciona. Ojalá podáis ayudarme. ¡Muchísimas gracias!

1 respuesta 1

0

Los "errores" que veo son:

  • Te falta cerrar el tag video

  • Te falta el src al video (aunque puede que si lo tengas)

  • La propiedad current es un:

    Un valor de punto flotante de precisión doble que indica el tiempo de reproducción actual en segundos.

Corrigiendo estas cosas tus códigos funcionan.

Ejemplo:

window.addEventListener("load", init);

function init() {

  let video = document.getElementById("player");
  let segundo = ["0", "1", "2", "3", "4", "5"];
  let imagenes = ["img/Imagen01_000.jpg", "img/Imagen02_007.jpg", "img/Imagen03_012.jpg", "img/Imagen04_017.jpg", "img/Imagen05_023.jpg", "img/Imagen06_027.jpg", "img/Imagen07_031.jpg", "img/Imagen08_032.jpg"];
  
  let tiempo = document.getElementById("tiempo");
  let imagen = document.getElementById("imagen");
  video.addEventListener("timeupdate", function() {
    tiempo.innerHTML = video.currentTime;
    imagen.innerHTML = imagenes[Math.floor(video.currentTime)];
  });
}
/**/
<video id="player" controls width="400" src="//samplelib.com/lib/preview/mp4/sample-5s.mp4" loop></video>
<h2>Instante de reproducción: <span id="tiempo">X</span></h2>
<div>Image SRC: <span id="imagen"></span></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.