I'm having trouble with creating a video player using MediaSource. I am unable to get it to play while buffering new data; instead, it downloads the full data before playing.
const vidElement = document.querySelector('video');
if (window.MediaSource) {
const mediaSource = new MediaSource();
vidElement.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', onSourceOpen);
} else {
console.log("The Media Source Extensions API is not supported.")
}
function onSourceOpen(e) {
URL.revokeObjectURL(vidElement.src);
const mime = 'video/webm; codecs="opus, vp09.00.10.08"';
const mediaSource = e.target;
const sourceBuffer = mediaSource.addSourceBuffer(mime);
const videoUrl = 'droid.webm';
fetch(videoUrl)
.then((response) => response.arrayBuffer())
.then((arrayBuffer) => {
sourceBuffer.addEventListener('updateend', (e) => {
if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
mediaSource.endOfStream();
}
});
sourceBuffer.appendBuffer(arrayBuffer);
});
}
The problem is that this code does not work on the local host. I receive the error "MediaSource closed" and the following line is never executed:
mediaSource.endOfStream();
- Can anyone help me understand why the state is closed?
- Any suggestions for creating a player similar to YouTube or any open-source alternatives?
I've been experimenting with various codes and resources for the past two days, but I keep encountering errors related to MediaSource, such as "source removed" or "not linked."