CODEWITHSUNDEEP
javascripthtmlvideo-streaminghtml5-video
bbeckford
bbeckford

Reputation: 4477

HTML5 Video: Detecting Bandwidth

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.

Upvotes: 20

Views: 22536

Answers (5)

Fawntasia
Fawntasia

Reputation: 357

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

Upvotes: 2

droider
droider

Reputation: 752

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/

Upvotes: 5

Ja͢ck
Ja͢ck

Reputation: 173662

There are paid services that may give you an indication of what bandwidth the other party is on, like netspeed.

The data accuracy may be enough for you, but I haven't had the chance to test it for myself.

Upvotes: 0

Esailija
Esailija

Reputation: 140234

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.

Upvotes: 4

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

I hate that feature! It's usually wrong, and if I want to wait 2 hours to load my dang video, than wait I shall! There's no reliable way to accurately measure this without sending a large dummy file to the user and measure the time it took to get to him.

You should count on user input (and remember it correctly! Also unlike YouTube!).

In short, don't take YouTube as an example.

Upvotes: 0

Related Questions