2

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.

Navspace
  • 101
  • 6

2 Answers2

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.

Hydroper
  • 344
  • 2
  • 9
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.

ChessAndCode
  • 111
  • 8