HTML5 Video: Detecting Bandwidth

Question

I have a 1080p video that I'm displaying in an HTML5 <video> tag on my page.

Is there a simple(ish) javascript method of detecting bandwidth so I can switch out the video for lower quality versions if the user's connection is too slow to stream the video? Similar to the logic behind YouTube's 'auto' video size chooser.

Solution 1

Depending on what player and encoding platform you are using you may be able to use HLS encoding for your videos. HLS stands for HTTP Live Streaming, a protocol developed by Apple for primarily solving this problem (among others).

HLS basically breaks your video file into multiple small files so they can be "pseudo" streamed using a simple Web server. With HLS you can also encode in multiple resolutions and a player might be able to switch to a lower or higher bandwidth.

The only downside is that most of the players use Flash to play HLS encoded content. Check it out in action here: http://www.flashls.org/latest/examples/chromeless/

Here's HLS demo for flowplayer: http://demos.flowplayer.org/basics/hls.html

And here is a plugin for VideoJS: https://github.com/videojs/videojs-contrib-hls

To encode in HLS, you can either use ffmpeg for free and upload files to your server: https://www.ffmpeg.org/ffmpeg-formats.html#hls-1

Or, you can use a cloud-based solution like AWS Transcoder or Brightcove https://aws.amazon.com/elastictranscoder/

Solution 2

In google chrome at least there are these properties on a video element:

webkitVideoDecodedByteCount: 0
webkitAudioDecodedByteCount: 0

These should be enough to determine how fast the client can decode the video. As the video plays you would keep track of the delta amount of these bytes which gives you bytes/s the client is processing the video.

Solution 3

For a more up to date answer: MPEG-DASH is in the process of replacing HLS. HLS is used mainly in iOS land. Most desktop browsers do not plan to support it, and DASH is the standard they are moving toward. (However, there are plenty of players designed to allow you to use HLS with HTML5 video player like hls.js). DASH players include Bitmovin, Google Shaka, and more. Many people encode for both HLS and DASH currently. HLS also supports fragmented mp4. Please note that you will need to encode your videos correctly server side. Additional resource: http://www.streamingmedia.com/Articles/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-2016-110099.aspx

Comments

[Dan Herbert]

But surely if your connection speed slows during playback, you would want the video to automatically switch to the lower bandwidth stream temporarily rather than get your playback interrupted. No?

[Madara's Ghost]

@DanHerbert: Not if the switch is obstructive, which it usually is (A video's quality is sharply degraded, often causing any previous buffer to go to hell, meaning you can't rewind properly). No. If the user wanted to do it, he'll do it himself, trust me. Just make the quality change option visible and clear enough. Not everything must be automatic.

[schieferstapel]

I've looked into netspeed... It's an indicator but it's really very coarse, it only says "Cable/DSL", "Dialup", "Mobile" etc.

[Ja͢ck]

Yeah, feature detection and buffering speed monitoring would be the best alternative :)

[Sarsaparilla]

Any update on this method or any other now that it's 2015? Thanks

[That Brazilian Guy]

videojs-contrib-hls: "This project addresses that situation by providing a polyfill for HLS on browsers that have support for Media Source Extensions, or failing that, support Flash. You can deploy a single HLS stream, code against the regular HTML5 video APIs, and create a fast, high-quality video experience across all the big web device categories." Amazing! Just what I needed! Thanks a lot!

[Fawntasia]

For a HLS client that is player agnostic, try hls.js, introduced by DailyMotion. videojs-contrib-hls is tied to video.js.

[boxmein]

The user experience by having automatic quality selection is sometimes more important than video quality, for example that's what Netflix and YouTube does. For recorded lectures or content that can't be read in low quality, it will be better to allow the user to wait for the HQ video to load.

[Josh Powlison]

Why not both?: an "Auto" option, which will automatically detect and adjust video quality based on bandwidth, and options to choose "720p", "1080p", "4K", etc, and in those cases stick to the resolution even if the user must wait for the video to bufferr.

[Madara's Ghost]

@JoshPowlison Because the answer was written in 2012 when the technology was far less mature :)