Streaming Video: What’s On The Web Today?

In prepping for a presentation, I began thinking about how to best analyze the HTTPArchive on streaming video.  The ‘interesting stats’ page shows that 25% of the average webpage is video:

Screen Shot 2018-03-19 at 9.29.34 PM

Obviously, not all websites have video, and this large percentage is because humongous files (like video) throw off averages (see “Bill Gates walks into a bar“).

I am interested to see how video streaming is handled on the web.  HLS streaming is delivered through chunks of video that are played sequentially.  I’ve written a bit on how HLS streaming works with adaptive bitrate in the past.

The gist of it is that the first file in a video stream is a manifest file (with extension m3u8) This file tells the player in the browser (or in the app) what bitrates are available, and then the player selects the appropriate stream for the device and the available network conditions.  I’ve looked at a small number of manifests in the past, but was curious on a larger study.

Data Collection

To gather a larger dataset, I ran a quick query in HTTPArchive to look at the top 10,000 sites:

select
pages.rank, pages.url, requests.url, ext
from httparchive.runs.latest_requests_mobile requests
join(
select rank, pageid, url
from httparchive.runs.latest_pages_mobile) pages
on pages.pageid = requests.pageid
where ext = “m3u8”
order by rank asc

This gives me a list of files with extension m3u8.  To read and understand these files, I copied the column with the filename into a text file and saved it as 10k_m3u3.txt.  I can then curl all of these files to my computer for analysis:

xargs -n 1 curl -O < 10k_m3u3.txt -m 5

Inside each manifest file is a list of available streams. They are each listed on a line, and the lines look like this:

#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=513000,RESOLUTION=480x270
http://c.brightcove.com/services/mobile/streaming/index/rendition.m3u8?assetId=5733787565001&pubId=4841592010001&videoId=5733185801001

Since they all have this format, I can search the files for how many different bandwidth profiles exist across all of the streaming files:

grep -c ‘#EXT-X-STREAM-INF’ *.* | grep -v :0

master.m3u8?videoId=5734164478001:6

This results in 98 streams in the top 10,000 sites, and 237 videos in the top 1M sites.

This tells us that 41% of websites with HLS video streams are in the top 10,000 websites.

Moving ahead with the full data set, we can identify how many bitrates are available per video stream:

Screen Shot 2018-03-22 at 12.47.55 PM.png

40% of HLS videos have 6 bitrates available for streaming (it is the average/median and mode in this data set).  Let’s see what we can learn about these bitrate resolution combinations.

To get bitrate and resolution information for each of these streams, I grepped just these values from the files:

grep -o “[^-]BANDWIDTH=[0-9]*[^.*]RESOLUTION=[0-9xX]*” *.*

This regular expression grabs just the BANDWIDTH=(number) and RESOLUTION=(number) for each instance that both occur on the same line.

the [^-] ignores any -BANDWIDTH terms (since there is occasionally an “AVERAGE-BANDWIDTH reported).

the [^.*]  allows for any number of characters between the 2 terms, and ignores them all.

[0-9]* allows for any length number, and [0-9xX]* is any number and ‘x’ combination – e.g. 1280×720

The resulting list is 1065 different streams that are available from 191 videos.  (A few videos dropped out of the sample for not having resolution AND bandwidth values).

 

Video Resolutions Observed

There are 42 video resolutions specified in the data:

Screen Shot 2018-03-22 at 2.01.23 PM

The 6 most popular are identified below:

Screen Shot 2018-03-22 at 2.00.44 PM

You might be wondering – how can there only be 4 top resolutions, when the data shows that each stream averages 6 different bitrates? It turns out that many streams use the same resolution, but change other parameters (like encoding, or frames per second) that affect the bitrate.  The following chart has an x-axis of resolutions for each video, and the y-axis is the count:

Screen Shot 2018-03-22 at 2.08.38 PM

There are 260 video/stream combinations that utilize the same resolution twice. (And 3 that use the same resolution 3x, and one each of 4, 5 and 6).

Video Aspect Ratios:

988 (93%) of the streams are 16:9; 57 (5%) are 1:1, and there are a few 4:3 and 3:4 (portrait mode!)

Video Bitrates Observed

There are 585 observed bitrates (!?!) for the 1065 available streams.  (over 50% of the streams we are looking at have a unique bitrate).

Screen Shot 2018-03-22 at 2.58.27 PM

As expected from the math above, most of the bitrates have a count of just 1.  Aggregating the bitrates into 100KBPS chunks is slightly more useful:

Screen Shot 2018-03-22 at 3.17.28 PM

The most common bitrates are 600 KBPS, 800 KBPS, 1.0, 1.3, 1.9 and 2.2 MBPS.

If we look at each video, the median minimum bitrate is 500 KBPS, the median maximum is 2.1MBPS, and the median median bitrate is 1.14 MBPS.

Stream Startup

In HLS, the player chooses the first stream in the manifest to initiate streaming.  In this dataset, we see three different configurations that affect the first stream that begins playing.  The first example sorts the video streams bitrate from lowest to highest:

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=143000,RESOLUTION=480x270
http://c.brightcove.com/services/mobile/streaming/index/rendition.m3u8?assetId=5731546027001&pubId=4802324433001&videoId=5731535767001
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=204000,RESOLUTION=480x270
http://c.brightcove.com/services/mobile/streaming/index/rendition.m3u8?assetId=5731546028001&pubId=4802324433001&videoId=5731535767001
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=395000,RESOLUTION=640x360
http://c.brightcove.com/services/mobile/streaming/index/rendition.m3u8?assetId=5731543885001&pubId=4802324433001&videoId=5731535767001
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=726000,RESOLUTION=640x360
http://c.brightcove.com/services/mobile/streaming/index/rendition.m3u8?assetId=5731545741001&pubId=4802324433001&videoId=5731535767001
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1024000,RESOLUTION=960x540
http://c.brightcove.com/services/mobile/streaming/index/rendition.m3u8?assetId=5731545848001&pubId=4802324433001&videoId=5731535767001
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1322000,RESOLUTION=1024x576
http://c.brightcove.com/services/mobile/streaming/index/rendition.m3u8?assetId=5731544190001&pubId=4802324433001&videoId=5731535767001
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1686000,RESOLUTION=1280x720
http://c.brightcove.com/services/mobile/streaming/index/rendition.m3u8?assetId=5731545559001&pubId=4802324433001&videoId=5731535767001

The first stream will have bitrate 143 KBPS (480×270 resolution).  This means that the video will probably start up quickly (less data has to be transmitted), but will initially be of low quality.  We see 75% (144 of 191) streams use the lowest bitrate at startup.

This second manifest sorts the streams from HIGHEST to lowest:

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=6656000,RESOLUTION=1280x720,CODECS="avc1.4d001f,mp4a.40.2"
720p.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2748000,RESOLUTION=854x480,CODECS="avc1.4d001f,mp4a.40.2"
480p.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1449000,RESOLUTION=640x360,CODECS="avc1.4d001e,mp4a.40.2"
360p.m3u8

With a 6.656 MBPS bitrate and 1280×720 resolution, this video will look really nice – if it ever starts playing. Viewers on a slower cellular network may not have 6.6 MBPS throughput, meaning that this stream will initially try the high throughput stream, but eventually degrade the content to a lower stream.  We see 5% of videos use the highest bitrate at startup.

Finally, (this really feels like reading Goldilocks and the Three Bears), this 3rd manifest chooses a bandwidth somewhere in the middle:

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=490000,RESOLUTION=480x270,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE
https://videos-f.jwpsrv.com/content/conversions/CUMaVzM5/videos/cfu1vhHW-30635786.mp4.m3u8?token=0_5ab07ecf_0x4003d9b743638b0b4db3ad49ddad3180ba4a6e6f
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2840000,RESOLUTION=1920x1080,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE
https://videos-f.jwpsrv.com/content/conversions/CUMaVzM5/videos/cfu1vhHW-30635791.mp4.m3u8?token=0_5ab07ecf_0x2a46363f336ec9f2d4de5bc2be30187717531e66
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1370000,RESOLUTION=1280x720,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE
https://videos-f.jwpsrv.com/content/conversions/CUMaVzM5/videos/cfu1vhHW-30635788.mp4.m3u8?token=0_5ab07ecf_0xcad8b0de3796caa3747de339f488cfa21616d73f
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=640000,RESOLUTION=720x406,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE
https://videos-f.jwpsrv.com/content/conversions/CUMaVzM5/videos/cfu1vhHW-30635787.mp4.m3u8?token=0_5ab07ecf_0xd8e7b725b02bee5b0da1e2c484cf02d07b941888
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=340000,RESOLUTION=320x180,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE
https://videos-f.jwpsrv.com/content/conversions/CUMaVzM5/videos/cfu1vhHW-30635785.mp4.m3u8?token=0_5ab07ecf_0xddc49c219b1ea4088fd162b93272e17bdc08d91a
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=120000,CODECS="mp4a.40.2"
https://videos-f.jwpsrv.com/content/conversions/CUMaVzM5/videos/cfu1vhHW-30635790.m4a.m3u8?token=0_5ab07ecf_0x110c8479c4a1461cbae9c645a9e27f141f1a1eb7

So – what’s going on here?  In this case, the streams are listed in highest to lowest order, but the 490 KBPS stream is pulled out of order and placed at the top. By balancing fast startup with better quality video , and give the customer a quick startup with decent quality video.  20% of videos start with a middle streaming value.

 

95% of video streams starting with a lower bitrate and lower quality video to ensure that the video starts up quickly.

 

Video Playback on Different Mobile Networks

If your mobile device is on a slow network, what quality video levels do you expect to see?  By cross referencing the bitrate data to the resolution data, we can make some guesses.  I will use WebPageTest’s definitions of network speeds as my criteria:

EDGE: 280 KBPS

Slow 3G: 400 KBPS

Fast 3G: 1.6 MBPS

Slow 4G: 3 MBPS

4G: 9 MPBS

 

What we find is that even at 2G, 16% of videos offer a bitrate that could playback on the device. 35% support “Slow 3G”, and once we hit 3G, just about all the videos should stream.

Screen Shot 2018-03-29 at 12.44.02 AM

Now, I bet you are thinking to yourself “I bet that video on 2G is pretty low resolution.”  And you’d be correct. We can chart how the video resolution will change at these different network speeds:

Screen Shot 2018-03-29 at 12.54.06 AM

We can see the video streams move left to right (and grow taller) as the network speed increases, until at 4G, where every video is using their maximum bitrate streams. Speaking of which – what is the best possible quality that these videos can stream?

Screen Shot 2018-03-29 at 1.05.48 AM

We can see from this graph that 83% of videos will stream up to 1280×720 or 1920×1080, but that leaves 17% that stream at a much lower bitrate – even when the network can support a higher quality video.

Conclusion

Looking at all HLS streams from the 15/2/2018 HTTPArchive crawl – we find 191 streams on mobile for analysis. The data shows that each video has on average 6 streams of varying bitrate and resolution. It is clear that there is no standardization on video resolutions or bitrates – every site has a different implementation – 42 different resolutions and 585 bitrates were observed.

95% of the videos have made optimizations to startup quickly by leading with a lower (or middle) quality stream. 16% of the videos support a stream that could conceivably run on an EDGE speed network. At high speeds (9 MBPS), 17% of all videos serve lower than 1280×720 quality video – potentially delivering a low quality video to the end user – resulting in a poor experience.

As mobile video continues to grow, its important that developers deliver high quality streaming video to every device, and from this study – we can conclude that many video streams are operating well, but there are also many that could be optimized for better delivery to mobile devices.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s