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

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>元素处呈现媒体播放。

如何为给定媒体创建范围请求，该请求仅返回资源的请求范围作为能够回放的离散资源，而无需媒体的其他部分，其中请求的媒体片段可以是媒体资源的任何离散部分？

Answer 1

你根本做不到。

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

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

但可以做的是使用MediaElement 的timerange 参数src：

#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>