如何对媒体片段的任何部分进行范围请求？

Question

如果我们想要发出 HTTP/1.0 或 HTTP/1.1 请求，例如给定媒体资源的字节 20000 到 100000 或秒 20 到 35 秒，例如，.webm 或.ogg 音频或 .mp4 视频，其中响应将是独立的媒体片段，无需媒体资源的其他部分即可播放，我们如何实现这一点？

例如

let headers = new Headers();
let range = 1024 * 1024;
headers.append("Range", "bytes=0-" + range); 
let request = new Request(url, {headers:headers});
fetch(request)
.then(response => response.blob())
.then(data => audio.src = URL.createObjectURL(data));

加载和媒体播放

let headers = new Headers();
let range = 1024 * 1024;
headers.append("Range", "bytes=" + range + "-" + range * 2);
let request = new Request(url, {headers:headers});
fetch(request)
.then(response => response.blob())
.then(data => audio.src = URL.createObjectURL(data));

记录成功的 200 和 206 响应状态，但不会在 <audio> 元素处呈现媒体播放。

如何为给定的媒体创建范围请求，其中 returns 只有请求的资源范围作为能够在没有媒体其他部分的情况下播放的离散资源，其中请求的媒体片段可以是任何媒体资源的离散部分？

Answer 1

你根本做不到。

您绝对需要 headers 您的媒体文件（元数据），以便您的浏览器能够解码其中包含的数据。

不同的媒体格式会有不同的解析规则，数据块的顺序不同，只获取一部分原始数据会破坏整个数据结构。因此，对于某些文件格式，您可能可以通过仅提供文件的开头来播放媒体的开头，但所有媒体格式都不允许这样做，甚至不要指望从开始到结束阅读。

虽然可以使用 MediaElement 的 src:

的 timerange parameter

#t=[starttime][,endtime]

const url = 'https://upload.wikimedia.org/wikipedia/commons/4/4b/011229beowulf_grendel.ogg';

btn.onclick = e => {
  // fast input check for the demo
  if (max.value > aud.duration)
    max.value = aud.duration;
  if (min.value > max.value)
    min.value = max.value - 1;
  // construct our timerange parameter
  let range = '#t=' + min.value + ',' + max.value;
  // append it to our original url
  aud.src = url + range;
}
btn.onclick();

<audio id="aud" aud controls></audio><br>
<label>start: <input id="min" type="number" value="10" min="0" max="119"></label>
<label>end: <input id="max" type="number" value="20" min="1" max="120"></label>
<button id="btn">re-load</button>

如何对媒体片段的任何部分进行范围请求？

How to make range request for any portion of a media fragment?

javascript

media

http

codec

fetch-api