网站 › 『编程语言区』 › 视频全量缓冲播放【H5播放器】

梦汐 发表于 2024-2-8 18:28

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

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 发表于 2024-2-8 18:43

厉害了，我的js

blindcat 发表于 2024-2-8 18:47

学习一下，感谢分享

laustar 发表于 2024-2-8 19:04

学习一下。

jak123 发表于 2024-2-8 19:12

helh0275 发表于 2024-2-8 19:20

感谢楼主分享，但能出一个教学视频吗？{:301_1008:}

wyesheng 发表于 2024-2-8 21:40

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

ztqddj007 发表于 2024-2-9 08:05

不知道 怎么用 楼主讲一讲

wushengli 发表于 2024-2-9 11:54

看不懂楼主多说两句！

1580501717 发表于 2024-2-9 12:02

不懂，感觉很厉害！

查看完整版本: 视频全量缓冲播放【H5播放器】