流式视频格式是指可以边下载边播放吗(前端使用 fetch() 流式下载.mp4视频文件,跟踪进度)
参考:https://www.cnblogs.com/lxlx1798/articles/16969244.html
要么使用流读取器 ,要么使用 Reponse 的方法来获取结果 ,不能同时使用两种方法来读取相同的响应 。
直接获取:
Response.blob() 方法返回一个 resolve 返回值为 Blob 对象的 Promise
流读取:
Response.body 是一个 ReadableStream 对象
ReadableStream.getReader() 创建流读取器,并且会把流锁定 ,默认返回的是ReadableStreamDefaultReader 类型
ThegetReader()method of theReadableStreaminterface creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.
response.headers.get(Content-Length) 得到响应的总长度
ReadableStreamDefaultReader.read() 方法得到一个 Promise 对象 ,可以获取到流内部序列中的下一个分块 ,循环调用直到完成 ,同时收集数据得到一个Uint8Array 数组
最后转换成 Blob 就可以完成下载了
用到的一些方法:
fetch()
The globalfetch()method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.
The promise resolves to theResponseobject representing the response to your request.
Afetch()promise only rejects when a network error is encountered (which is usually when theres a permissions issue or similar). Afetch()promisedoes notreject on HTTP errors (404, etc.). Instead, athen()handler must check theResponse.okand/orResponse.statusproperties.
WindowOrWorkerGlobalScopeis implemented by bothWindowandWorkerGlobalScope, which means that thefetch()method is available in pretty much any context in which you might want to fetch resources.
Thefetch()method is controlled by theconnect-srcdirective ofContent Security Policyrather than the directive of the resources its retrieving.
ReadableStream.getReader()
ThegetReader()method of theReadableStreaminterface creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.
ReadableStreamDefaultReader.read()
Theread()method of theReadableStreamDefaultReaderinterface returns aPromiseproviding access to the next chunk in the streams internal queue.
URL.createObjectURL()
TheURL.createObjectURL()static method creates a string containing a URL representing the object given in the parameter.
The URL lifetime is tied to thedocumentin the window on which it was created. The new object URL represents the specifiedFileobject orBlobobject.
To release an object URL, callrevokeObjectURL().
URL.revokeObjectURL()
TheURL.revokeObjectURL()static method releases an existing object URL which was previously created by callingURL.createObjectURL().
Call this method when youve finished using an object URL to let the browser know not to keep the reference to the file any longer.
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!