Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null

Question

I am trying to stream a video file via socket.io to my client (currently using Chrome as client). I am only getting the first frame of the video and afterwards the Failed to appendBuffer is appears:

Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null

Part of JS code:

   if (buffer.updating || queue.length > 0) {
        console.log("buffer.updating = " + buffer.updating  + " queue.length  = "  + (queue.length));
            queue.push(videoData);
        } else {
        console.log("else buffer.updating = " + buffer.updating  + " queue.length = "  + (queue.length));
            buffer.appendBuffer(videoData);
        }

    }
};

var play = function() {

    //var mimeType = `video/mp4;codecs="${$scope.codec}"`;
    var mimeType = 'video/mp4;codecs="' + codec +'"';

    console.log("mimetype = " + mimeType + " is supported = " + MediaSource.isTypeSupported(mimeType));

    buffer = mediaSource.addSourceBuffer(mimeType);

    buffer.addEventListener('update', function () {
        if (queue.length > 0 && !buffer.updating) {
            console.log("buffer.appendBuffer");
            buffer.appendBuffer(queue.shift());
        }
    });



    video.play();
};

Please help me!

Tsana

Someone , Please help me? – Tsana

Hey Moti, did you figure this out? – Ubiquitarian

Unfortunately I have no solution for the moment,if you have any idea i will be happy to listen... – Tsana

I'm dealing with same issue at the moment. And found, you can actually do what it says -> retrieve error from element. Just log video.error (in your case). Their description can be found at HTML 5 spec – Noisome

Also in case of Chrome you can check logs of an actual player behind Video element in chrome://media-internals/ – Noisome

I think your problem is related with the video tag maybe you are missing src or something like that you can try to find out if it is related with video tag error by document.getElementById('videoElementId').addEventListener('error',function(e){ console.error(e); }); – Alvarez

Answer 1

This is could be happen when source buffer still updating and you call appendBuffer to append another buffer to it. You should wait the updateend event called then you're allowed to append another buffer. You can use Promise to have an await function waiting until it resolve then you append another buffer like this:

const sourceBuffer = mediaSource.addSourceBuffer(mimeType);

const loadBuffer = (buffer) => {
  return new Promise((resolve)=>{
    sourceBuffer.addEvenListener('updateend',() resolve);
    sourceBuffer.append(buffer);
  });
};

await loadBuffer(buffer1);
await loadBuffer(buffer2);

Tynishatynwald