0

Tengo un error con esta función de JS, el cual da el error de abajo y no sé como solucionarlo. Es acerca de un reproductor de vídeo. El fallo se produce al tocar la barra de desplazamiento del vídeo para adelantar o retroceder el vídeo. La función es:

function desplazarMedio(e) {
    if (!medio.paused && !medio.ended) {
        var ratonX = e.pageX - barra.offsetLeft;
        var maximo = parseInt(getStyle('barra', "width"));
        var nuevoTiempo = ratonX * medio.duration / maximo;
        medio.currentTime = nuevoTiempo;
        progreso.style.width = ratonX + 'px';
    }
}

Y el error (da error en la línea "medio.currentTime = nuevoTiempo":

Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.
    at HTMLDivElement.desplazarMedio (reproductor.js:135:21)

El código entero es:

function iniciar() {
    maximo = 700;

    medio = document.getElementById('medio');
    reiniciar = document.getElementById("reiniciar");
    retrasar = document.getElementById("retrasar");
    play = document.getElementById('play');
    adelantar = document.getElementById("adelantar");
    silenciar = document.getElementById("silenciar");
    menosVolumen = document.getElementById("menosVolumen");
    masVolumen = document.getElementById("masVolumen");
    barra = document.getElementById('barra');
    progreso = document.getElementById('progreso');

    reiniciar.addEventListener("click", accionReiniciar, false);
    retrasar.addEventListener("click", accionRetrasar, false);
    play.addEventListener('click', accionPlay, false);
    adelantar.addEventListener("click", accionAdelantar, false);
    silenciar.addEventListener("click", accionSilenciar, false);
    menosVolumen.addEventListener("click", accionMenosVolumen, false);
    masVolumen.addEventListener("click", accionMasVolumen, false);
    barra.addEventListener('click', desplazarMedio, false);
}

function setVolumen(valor) {
    var volumen = medio.volume;

    volumen += valor;

    if (volumen >= 0 && volumen <= 1) {
        medio.volume = volumen;
    } else {
        if (volumen < 0)
            medio.volume = 0;
        else
            medio.volume = 1;
    }
}

function accionMenosVolumen() {
    setVolumen(-.1)
}

function accionMasVolumen() {
    setVolumen(.1)
}

function setTiempo(tValue) {
    if (tValue == 0) {
        medio.currentTime = tValue;
    } else {
        medio.currentTime += tValue;
    }

    redimensionaBarra();
}

function accionRetrasar() {
    setTiempo(-5);
}

function accionAdelantar() {
    setTiempo(5);
}

function accionReiniciar() {
    setTiempo(0);
}

function accionPlay() {
    if (!medio.paused && !medio.ended) {
        medio.pause();
        play.value = '\u25BA';
        window.clearInterval(bucle);
    } else {
        medio.play();
        play.value = '||';
        bucle = setInterval(redimensionaBarra, 1000);
    }
}

function accionSilenciar() {
    if (medio.muted) {
        medio.muted = false;
        silenciar.value = "silenciar";
    } else {
        medio.muted = true;
        silenciar.value = "escuchar";
    }
}

/*function redimensionaBarra()
{
    if(!medio.ended)
    {
        var total=parseInt(medio.currentTime*maximo / medio.duration);
        progreso.style.width=total+'px';
    }
    else
    {
        progreso.style.width='0px';
        play.value='\u25BA';
        window.clearInterval(bucle);
    }
}*/

function redimensionaBarra() {
    if (!medio.ended) {
        var maximo = parseInt(getStyle('barra', "width"));
        var total = parseInt(medio.currentTime * maximo / medio.duration);
        progreso.style.width = total + 'px';
    } else {
        progreso.style.width = '0px';
        play.value = '\u25BA';
        window.clearInterval(bucle);
    }
}

/*function desplazarMedio(e)
{
    if(!medio.paused && !medio.ended)
    {
        var ratonX=e.pageX-barra.offsetLeft;
        var nuevoTiempo=ratonX*medio.duration/maximo;
        medio.currentTime=nuevoTiempo;
        progreso.style.width=ratonX+'px';
    }
}*/

function desplazarMedio(e) {
    if (!medio.paused && !medio.ended) {
        var ratonX = e.pageX - barra.offsetLeft;
        var maximo = parseInt(getStyle('barra', "width"));
        var nuevoTiempo = ratonX * medio.duration / maximo;
        medio.currentTime = nuevoTiempo;
        progreso.style.width = ratonX + 'px';
    }
}

function getStyle(nombreElemento, nombrePropiedad) {
    var elemento = document.getElementById(nombreElemento);
    return
window.getComputedStyle(elemento, null).getPropertyValue(nombrePropiedad);
}

window.addEventListener('load', iniciar, false);

1 respuesta 1

0

probablemente el resultado de var nuevoTiempo = ratonX * medio.duration / maximo; sea un número periódico (ejemp. 1,3333333...3), si es así te da el error porque es un número infinito y no acabaría nunca de posicionar el video en el nuevo tiempo de reproducción. Desconozco el tipo de dato que hay en la variable nuevoTiempo y cuantos decimales necesita, si es que los necesita. La solución es que redondees el resultado a los decimales que necesites. Puedes utilizar var nuevoTiempo = Math.round((ratonX * medio.duration / maximo)*10)/10 para 1 decimal, var nuevoTiempo = Math.round((ratonX * medio.duration / maximo)*100)/100, para 2 decimales o var nuevoTiempo = Math.round(ratonX * medio.duration / maximo) para un número entero, etc...

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.