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.

Answer 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/

Answer 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.

Answer 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