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

Question

I created an object url with a blob

let src = URL.createObjectURL(blob)

and used it as my video src attribute, but it causes this error:

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

Any idea on how to fix this?

Although I think my problem is general, I'm using angular 2, so precisely, my code looks like this:

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

and the template

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

Also, I'm using angular-cli as my server, and since this looks like a server error (?), it might be useful to know.

Possible duplicate of https://stackoverflow.com/questions/39734409/angular2-and-window-url-createobjecturl . it appears that `bypassSecurityTrustUrl` is unneeded here. — Estus Flask, Sep 13 '17 at 07:36
Have you tried setting video.srcObject using the blob directly? — , Sep 13 '17 at 08:18
@K3N nobody does support that yet, unfortunately... `srcObject` is still limited to MediaStreams — Kaiido, Sep 13 '17 at 09:13
Where does this Blob comes from? This error often comes out when you try to pass an empty file. Has your blob a `size`? — Kaiido, Sep 13 '17 at 09:14
@estus Not a duplicate and `bypassSecurityTrustUrl` is needed, both in my case and in the question you linked. — Maxime Dupré, Sep 13 '17 at 15:12
@Kaiido You are right! My blob was empty. I fixed my code to have a non-empty blob and now it works. Please post this as an answer. Thanks for the help! — Maxime Dupré, Sep 13 '17 at 15:29

score 6 · Accepted Answer · edited Jan 19 '18 at 15:19

This error means that the browser tried to get a range of the media that doesn't exist.
I can think of three ways that could have trigger it from a Media Element :

use the #t= timerange option, with an out of range value: But browsers seems to just ignore it in this case...

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

Remove the file while it is currently being read (or revoke the blobURI of a blob before it's get completely loaded): That triggers a 404 not a 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>

Wrong metadata stating that the media's duration is greater than what it is really: I didn't tested it yet

Pass an empty Blob as the media source: That's probably it

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

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

[Note] Since we are looking for network errors, please try the above snippets with your dev-tools console open, there is no way to show these errors directly in the snippet's console.

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

1 Answers1