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!