Audio HTML5 haciendo clic en la barra de progreso para pasar a un momento diferente

Solución:

Dado un html que se ve así:

<div class="container">
    <video class="video">
        <source></source>
    </video>
    <progress min="0" max="100" value="0"></progress>
    <div class="controls"></div>
</div>

Para buscar un momento específico en el video como resultado de un evento de clic, el js se vería así:

var player = document.querySelector("video");
var progressBar = document.querySelector("progress");
progressBar.addEventListener("click", seek);

function seek(e) {
    var percent = e.offsetX / this.offsetWidth;
    player.currentTime = percent * player.duration;
    progressBar.value = percent / 100;
}

Sin embargo, esto no aborda cómo buscar con un clic / arrastrar (como lo hacen la mayoría de los reproductores de video). incluir guión

Me encontré con esta pregunta hoy porque estoy creando un reproductor de video HTML5 personalizado y tenía la misma pregunta. Solo en lo que respecta al video en lugar de al audio. Sin embargo, el proceso debería funcionar igual.

Encontré este artículo y pude incorporar la barra de progreso en mi reproductor. https://msdn.microsoft.com/en-us/library/ie/gg589528%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

En lugar de usar un progressbar elemento, como estaba haciendo, o un div elemento, como lo estás haciendo, el truco aquí es usar un elemento de lienzo en su lugar.

<canvas id='progress-bar' width="200" height="20" style="border:1px solid green;">canvas not supported</canvas>

Luego, en su JavaScript, cree un identificador para hacer referencia a él

var mediaPlayer;
var progressBar;
var canvas;

Cuando se cargue el documento, inicialice todo, incluidos los elementos de la barra de progreso

mediaPlayer = document.getElementById('media-video');
progressBar = document.getElementById('progress-bar');
canvas = document.getElementById('progress-bar');

canvas.addEventListener("click", function(e) {

    var canvas = document.getElementById('progress-bar');

    if (!e) {
        e = window.event;
    } //get the latest windows event if it isn't set
    try {
        //calculate the current time based on position of mouse cursor in canvas box
        mediaPlayer.currentTime = mediaPlayer.duration * (e.offsetX / canvas.clientWidth);
    }
    catch (err) {
    // Fail silently but show in F12 developer tools console
        if (window.console && console.error("Error:" + err));
    }
}, true);

mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);

Luego cree una función fuera de su función de inicialización para el timeupdate oyente para llamar y actualizar automáticamente la barra de progreso para usted

function updateProgressBar() {        
    mediaPlayer = document.getElementById('media-video');
    //get current time in seconds
    var elapsedTime = Math.round(mediaPlayer.currentTime);
    //update the progress bar
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        //clear canvas before painting
        ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
        ctx.fillStyle = "rgb(255,0,0)";
        var fWidth = (elapsedTime / mediaPlayer.duration) * (canvas.clientWidth);
        if (fWidth > 0) {
            ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
        }
    }
}

Aún no lo he limpiado por completo. De ahí los identificadores redundantes para la misma identificación. Pero estoy seguro de que te haces una idea.

---

---

Utiliza Nuestro Buscador