HTML中音频或者视频的缓存进度的获取

Question

现在的要求就是点击播放后，视频或者音频没有加载完成，显示加载中，并且显示加载的进度。加载的进度该怎么获取呢？

Answer 1

谢邀。
HTML的原生视频/音频标签本身就支持缓存显示功能，但是前提是你的source支持边下边播。
你用的播放模式是什么？
是用HTML的原生标签<video>吗？
如果是的话，source是用的静态URL吗？
然后如果是的话，是无法实现你要的功能的。
如果想实现你要的功能，首先要做到边下边播，这里一般最多也最方便的做法是使用rtmp+httpflv协议。
这样你就可以通过动态的httpurl来播放rtmp视频，并实现边下边播。
如果你用的是Java来写服务器，建议使用red5。

另外的话，有个简单的方法可以粗略地解决这个问题，就是preload属性，把它开启。

Answer 2

1.可以利用video.buffer属性返回TimeRanges 对象，表示用户视频缓冲范围。不过会得到多个缓冲范围，以最后一个为主。
2.利用video.duration获取总时长；
3.两者做对比，可以得到下载进度。即：video.buffered.end(video.buffered.length-1)/video.duration

Answer 3

建议仔细看下TimeRanges对象的相关属性

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

    if (buffered.length) {
        // 获取当前缓冲进度
        loaded = 100 * buffered.end(0) / myAudio.duration;
        // 渲染缓冲条的样式
           $('.progress').css("width", loaded + "%");
    }

    setTimeout(getBuffered, 50);
}

getBuffered();