Jamstack Explorers

Video Streaming with Adaptive Bitrate with Scott Wachtmann & Jen Brissman

Verifying ABR Streaming in the Browser

This stage covers what happens within the browser's console as we use ABR.


Now we're going to take a look at how adaptive bitrate can be inspected inside of our browser console. To do this, we can use Chrome's network tools to inspect traffic as it moves across the wire. To set up for our demo, I've done a few things to configure our environment, to make this as easy as possible.

First, since all of our traffic comes across as XHR requests, I've enabled that filter in my network panel. You'll also notice that I've turned off the browser's cache to prevent any files from being served from our local system. I'm also using the browser's network tools to simulate a 3g connection in order to allow different playback conditions while we watch the video. Once we did our initial page load, you'll notice that the browser has already downloaded three different files for playback. We have two m3u8 files, and one .ts file. If we step into those files, we can talk quickly about their contents. I'm going to use the preview panel to take a look at what's inside each file that we've brought across the wire.

First, our master playlist contains each representation of the video at various width and height resolutions. The second m3u8 file is the individual representation of the video that our browser has selected. It also contains each .ts file that contains the corresponding byte-range for each segment of the video.

The browser has also brought one .ts file in preemptively before playback starts, so that playback can begin as soon as the user clicks the play button. Once we begin playback, you'll see the browser begin to make requests for additional .ts files. Each file fills up the video buffer, allowing playback to continue for an additional segment of time.

If we change our throttling conditions, we might see the browser choose to scale up to a higher quality video or finish playback more quickly.


your progress