视频全量缓冲播放【H5播放器】

梦汐

[JavaScript] 纯文本查看 复制代码

function CreateBlobViderSrc(url) {
    return new Promise((resolve, reject) => {
        fetch(url).then(async resp => {
            var cl = resp.headers.get('Content-Length');
            var total = parseInt(cl, 10);
            let loader = 0;

            console.log("视频总大小", total);

            var reader = resp.body.getReader();

            timerId = setInterval(downloadStatus, 1000);

            function downloadStatus() {
                console.log(`缓存进度: ${parseInt(loader / total * 100)}%`);
            }

            let chunks = [];

            while (true) {
                const { done, value } = await reader.read();

                if (done) {
                    break;
                }

                loader += value.byteLength;

                chunks.push(value);
            }

            clearInterval(timerId)

            console.log("下载完成");

            var file_data = new Blob(chunks, { type: resp.headers.get('Content-Type') });


            const blobSrc = URL.createObjectURL(file_data);

            console.log(blobSrc, 'blobSrc加载完毕');

            return resolve(blobSrc)
        })
    })
}
CreateBlobViderSrc("示例视频地址").then(src => console.log(src))

// 示例: 将视频地址粘贴到上方然后运行,运行完将blob开头的链接复制替换掉示例视频地址,然后就可以流畅播放了
// <vider src='示例视频地址'></vider>

xixicoco

厉害了，我的js

blindcat

学习一下，感谢分享

laustar

学习一下。

helh0275

感谢楼主分享，但能出一个教学视频吗？

wyesheng

看得不是很懂，但还是很膜拜大佬呐。。。

ztqddj007

不知道 怎么用 楼主讲一讲

wushengli

看不懂楼主多说两句！

1580501717

不懂，感觉很厉害！