MediaSource closed after appendBuffer

Question

I have two videos that I'm trying to play using MediaSource, but only one of them works. Both have the codecs set as avc1.4d401f and mp4a.40.2, but while one of them plays just fine, the other one closes the MediaSource as soon as I call the appendBuffer on the SourceBuffer. The relevant bits of the code are as follows:

var mainSource;
var mimeCoded = 'video/mp4; codecs="avc1.4d401f,mp4a.40.2"';

    mainSource = new MediaSource();
    var sourceBuffer;

    mainSource.addEventListener('sourceopen', () => {
        console.log('readystate', mainSource.readyState);
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'arraybuffer';
        xhr.open('get', 'main.mp4');
        xhr.addEventListener('load', (e) => {
            sourceBuffer = mainSource.addSourceBuffer(mimeCoded);
            sourceBuffer.mode = 'sequence';
            sourceBuffer.addEventListener('updateend', onUpdateEnd);
            sourceBuffer.appendBuffer(e.target.response);
            console.log('updating', sourceBuffer.updating);
        });
        xhr.send();

    });

    vid.src = URL.createObjectURL(mainSource);

    onUpdateEnd = function ()
    {
        console.log('readystate2', mainSource.readyState, sourceBuffer.updating);
        vid.play();
        sourceBuffer.removeEventListener('updateend', onUpdateEnd);
    };

When using one of the videos, both logs on mainSource.readyState will output open, but with another one it shows closed on the second log (and consequently errors on vid.play()). I'm already out of ideas on what may be going on, so any help is appreciated.

Answer 1

Answering for further reference, for it to work the video must be fragmented on encoding. Using the following ffmpeg command did the trick:

ffmpeg -i input.mp4 -movflags frag_keyframe+empty_moov+default_base_moof output_frag.mp4