My Sad Existence - Building a Video Player with MSE

Part IV: Adding Seeking​

So far, we've built a simple MSE player that can play both video and audio, but notice that if you attempt to seek to the middle of the stream, it will buffer indefinitely. This is actually a pretty easy bug to fix!

Give it a go on your own, but if you get stuck, I'll show you how to fix it in the next section.

Simple Player with Seeking​

The additional code here is actually pretty minimal. When you perform a seek on a video element, the 'timeupdate' event is fired with the new desired playback time.

If we find that the desired time is already in the buffered range, then nothing needs to be done and playback will continue uninterrupted. However, if the desired time is not in the buffered range, we need to:

1. Find the segment that contains the desired time
2. Fetch that segment
3. Append it to the SourceBuffer

We've already written a fetchAndAppendSegment method that does exact this, so all we need to do is ensure we call it with the new time if we've detected that the desired time is not in the buffered range:

handleTimeUpdate() {
    const currentTime = this.config.videoElement.currentTime;
    
    for (let i = 0; i < this.sourceBuffer.buffered.length; i += 1) {
        const isCurrentTimeInBufferRange =
            this.sourceBuffer.buffered.start(i) <= currentTime &&
            this.sourceBuffer.buffered.end(i) >= currentTime;

        if (isCurrentTimeInBufferRange) {
            const remainingBuffer =
                this.sourceBuffer.buffered.end(i) - currentTime;
            console.log(`Buffer Remaining: ${remainingBuffer}`);

            if (remainingBuffer < this.config.segmentLengthS) {
                const nextSegmentTime =
                    this.sourceBuffer.buffered.end(i) + 1;
                this._fetchAndAppendSegment(nextSegmentTime);
            }

            return;
        }
    }
    this._fetchAndAppendSegment(currentTime);
}

Buffered Ranges​

The only additional complexity here is that the seek will create an additional buffered range (this.sourceBuffer.buffered). This means that we need to check if the desired time is in any of the buffered ranges, not just the first one.

For example, if you have started playback of the video from the beginning, and you're currently 20 seconds into the video, your buffered range will look like [ 0, 20 ].

If you then seek to position 50 and playback continues for 10 seconds, your buffered ranges will look like this: [ 0, 20 ], [ 50, 60 ].

These discontinuous ranges are why we need to check all buffered ranges to see if the desired time is in any of them.

Where are we?​

We've now built a player that can play video and audio, seek around, and buffer the next segment as needed.

You might be a little upset that many of the questions you had at the beginning of this series are still unanswered. You might be wondering:

Nick, you talk so much about adaptive streaming, but these code examples are all about playing a single resolution. This doesn't seem very adaptive. Did you lie to me?

I haven't lied, but I've left out quite a large piece of the puzzle when it comes to adaptive streaming: manifests. We will cover that next time!