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

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

你根本做不到。

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

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

但可以做的是使用 timerange parameter MediaElement 的 src:

#t=[开始时间][,结束时间]

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>