HTML中音頻或者視頻的緩存進(jìn)度的獲取

1.可以利用video.buffer屬性返回TimeRanges 對(duì)象，表示用戶視頻緩沖范圍。不過會(huì)得到多個(gè)緩沖范圍，以最后一個(gè)為主。
2.利用video.duration獲取總時(shí)長(zhǎng)；
3.兩者做對(duì)比，可以得到下載進(jìn)度。即：video.buffered.end(video.buffered.length-1)/video.duration

建議仔細(xì)看下TimeRanges對(duì)象的相關(guān)屬性

function getBuffered() {
    const myAudio = document.getElementById('myAudio');
    let buffered = myAudio.buffered,
        loaded;

    if (buffered.length) {
        // 獲取當(dāng)前緩沖進(jìn)度
        loaded = 100 * buffered.end(0) / myAudio.duration;
        // 渲染緩沖條的樣式
           $('.progress').css("width", loaded + "%");
    }

    setTimeout(getBuffered, 50);
}

getBuffered();

謝邀。
HTML的原生視頻/音頻標(biāo)簽本身就支持緩存顯示功能，但是前提是你的source支持邊下邊播。
你用的播放模式是什么？
是用HTML的原生標(biāo)簽<video>嗎？
如果是的話，source是用的靜態(tài)URL嗎？
然后如果是的話，是無法實(shí)現(xiàn)你要的功能的。
如果想實(shí)現(xiàn)你要的功能，首先要做到邊下邊播，這里一般最多也最方便的做法是使用rtmp+httpflv協(xié)議。
這樣你就可以通過動(dòng)態(tài)的httpurl來播放rtmp視頻，并實(shí)現(xiàn)邊下邊播。
如果你用的是Java來寫服務(wù)器，建議使用red5。

另外的話，有個(gè)簡(jiǎn)單的方法可以粗略地解決這個(gè)問題，就是preload屬性，把它開啟。