Can Media Source API appended buffer(range) be overwritten?

Question

I did little investigation into Media Souce Extension/API but I haven't found a way for specific buffer to be overwritten. Lets say I have watched first 30 seconds with lower quality and player switched to higher quality after that, so 30-60 sec is HQ. So... when I seek back to seconds 0-30 I would get lower quality video (one already buffered), but I would like to re-append newly requested same range with higher quality and watch that. I've seen on existing players (MSE showcases) this is not the case.

I guess MSE determines where to append buffer based on (I cannot recall now for the name) start date time? So, is it possible to override some appended range/buffer in Media Source API ?

Answer 1

Yes, it's possible. Before you call appendBuffer() on a source buffer, set timestampOffset to the time in seconds you wish to start overwriting. For example:

    var mediaSource = new MediaSource();
    mediaSource.addEventListener('sourceopen', function() {
        var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

        /*  ...code to fetch low quality binary... */
            sourceBuffer.appendBuffer(lowQualityBinary);

        /*  ...later fetch higher quality binary and overwrite
         *  entire video starting at the beginning...
         */
            sourceBuffer.timestampOffset = 0;
            sourceBuffer.appendBuffer(highQualityBinary);
    });

Note that if the user is playing the video and you overwrite starting at a time prior to their current play time, the current behavior on Chrome is to continue showing the original appended video. If it's overwritten later, or they seek around, they'll see the new video.