Hi. I try to play mp4 video file from blob as source but with no success.
After I load the video source and use video.play() I recive the error:
> DOMException: Failed to load because no supported source was found.
I have tested the source for an image as blob and is working, so path exists.
I have tested 30MB image and is working, is not from size limit, video tested have 16MB.
I have tested with local file stored on root webapp, so blob exist and is ok.
I have tested another browsers, chrome Version 106.0.5249.119 (Official Build) (64-bit), Mozilla, Chromium 110 and all working.
The problem persist on Web Browser and WebApp (not matter is hosted or local).
How you can reproduce the error:
<video width="400" id="video" controls >
<source src="" type="video/mp4">
Your browser does not support HTML video.
</video>
async function newFunc() {
var video = document.getElementById('video');
let blob = await fetch("intro.mp4").then(r => r.blob());
url = window.URL.createObjectURL(blob);
video.src = url;
video.load();
video.play()
.then(() => {
console.log("is ok, is playing")
})
.catch(error => {
console.log(error);
console.log(error.code)
});
}
newFunc()