使用 blob 作为视频时出现 416（请求的范围不可满足）HTTP 错误 "src"

Question

我用 blob

创建了一个对象 url

let src = URL.createObjectURL(blob)

并将其用作我的视频 src 属性，但它会导致此错误：

GET blob:http://localhost:4200/ab3cc5aa-19cc-41f1-a4b7-55e1fa3ce85c 416 (Requested Range Not Satisfiable)

知道如何解决这个问题吗？

尽管我认为我的问题很普遍，但我使用的是 angular 2，所以准确地说，我的代码如下所示：

let src = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob));

和模板

<video *ngFor="let videoUrl of _videos" [src]="videoUrl"></video>

此外，我正在使用 angular-cli 作为我的服务器，因为这看起来像是服务器错误 (?)，了解它可能会有用。

Answer 1

此错误表示浏览器试图获取不存在的媒体范围。
我可以想到三种可以从媒体元素触发它的方法：

使用 #t= timerange 选项，值超出范围：但在这种情况下浏览器似乎只是忽略它...

<video src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4#t=90000,100000" autoplay controls></video>

删除当前正在读取的文件（或在完全加载之前撤销 blob 的 blobURI）：触发 404 而不是 416

v.onloadedmetadata = e => {
  URL.revokeObjectURL(v.src);
  v.currentTime = 300;
  };
fetch('https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4').then(r=>r.blob()).then(b=>{
  v.src = URL.createObjectURL(b);
  })

<video id="v" autoplay></video>

错误的元数据表明媒体的持续时间比实际时间长：我还没有测试过

传递一个空的 Blob 作为媒体源：大概就是这样

v.src = URL.createObjectURL(new Blob([], {type:'video/mp4'}));

<video id="v" autoplay controls></video>

[注意] 由于我们正在寻找网络错误，请在您的开发工具控制台打开的情况下尝试上面的代码片段，无法直接在片段的控制台。

使用 blob 作为视频时出现 416（请求的范围不可满足）HTTP 错误 "src"

416 (Requested Range Not Satisfiable) HTTP error when using a blob as the video "src"

blob

http-error

html5-video

angular-cli

angular