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

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