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