How to stream a blob video in JavaScript? [duplicate]

Question

I have a video named video.mp4 I want to stream it in a video tag in HTML, I tried too many answers from other questions and none of them worked.

var URL = this.window.URL || this.window.webkitURL;
var file = new Blob(["./video.mp4"], {"type": "video\/mp4"});
var value = URL.createObjectURL(file);

console.log(value);
video.src = value;

When I tried the code above it printed a blob, but when I want to play the video it doesn't work and shows this error in the console:

Uncaught (in promise) DOMException: The element has no supported sources.

You are not running the same code as in the duplicate, BTW. You are missing the video.load() step at the end. — Heretic Monkey
– Heretic Monkey, Commented Sep 25, 2022 at 16:32

ChessAndCode · Accepted Answer · 2022-09-25 15:37:07Z

1

You could do it like this:

var vid= document.createElement("video");
var vidsrc= document.createElement("source");
vidsrc.setAttribute('src','video.mp4');
vidsrc.setAttribute('type','video/mp4');
vid.appendChild(vidsrc);
document.body.appendChild(vid);

This code simply creates a new video element with a source element and adds it to the document body.

edited Sep 25, 2022 at 15:37

answered Sep 25, 2022 at 15:36

ChessAndCode

1118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Navspace Over a year ago

Your answer doesn't make the src as a blob

ChessAndCode Over a year ago

@Navspace The question seems to imply that he wants it as a <video> - "I want to stream it in a video tag in HTML"

Hydroper · Accepted Answer · 2022-09-25 15:41:33Z

1

new Blob cannot be used to directly read a file. You may need something like instantiating a XMLHttpRequest. Also look at <video> element documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video. You need to specify <source> elements with type attribute.

edited Sep 25, 2022 at 15:41

answered Sep 25, 2022 at 15:35

Hydroper

4515 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to stream a blob video in JavaScript? [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related