本文介绍了Chrome：播放正在通过FETCH/XHR下载的视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要实现的是让Chrome将视频文件加载为数据(通过Fetch API、XHR等等)，并在下载过程中使用<video>播放视频文件，而无需对同一URL发出两个单独的请求，也无需等待文件完全下载。
从FETCH API(response.body)获取ReadableStream很容易，但是我找不到将其提供给video元素的方法。我想我需要一个blobURL，它可以使用MediaSource对象创建。但是，在Chrome中没有实现SourceBuffer#appendStream方法，它听起来正是所需的，因此我不能将流直接连接到MediaSource对象。
Uint8Array，并使用SourceBuffer#appendBuffer，但这意味着回放不会立即开始，除非块大小非常小。而且感觉像是手动做一些所有这些API都应该开箱即用就能做的事情。如果没有其他解决方案，我走这条路，我应该期待什么警告？
是否有其他方法可以为ReadableStream创建BLOB URL？或者有没有办法让fetch和<video>共享一个请求？新的API太多了，我很容易错过一些东西。
推荐答案
经过几个小时的试验，找到了一个半工作的解决方案：
const video = document.getElementById('audio');
const mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', async () => {
const sourceBuffer = mediaSource.addSourceBuffer('audio/webm; codecs="opus"');
const response = await fetch(audioSRC);
const body = response.body
const reader = body.getReader()
let streamNotDone = true;
while (streamNotDone) {
const {value, done} = await reader.read();
if (done) {streamNotDone = false; break;}
await new Promise((resolve, reject) => {
sourceBuffer.appendBuffer(value)
sourceBuffer.onupdateend = (() => {
resolve(true);
})
})
}
});
它适用于https://developer.mozilla.org/en-US/docs/Web/API/MediaSource
另外，我只对WebM/opus格式进行了测试，但我相信它也可以与其他格式一起使用只要您指定它。
这篇关于Chrome：播放正在通过FETCH/XHR下载的视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！