20

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.

bbeckford
  • 4,467
  • 6
  • 34
  • 48
  • I wonder why there is no `srcset` or similar thing for videos? that would solve already 90% of cases, where useres load videos from mobile phones... – benzkji Nov 23 '20 at 15:55

5 Answers5

5

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/

droider
  • 742
  • 1
  • 7
  • 11
  • 2
    `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! – That Brazilian Guy Jan 22 '16 at 18:57
  • For a HLS client that is player agnostic, try hls.js, introduced by DailyMotion. videojs-contrib-hls is tied to video.js. – Fawntasia Dec 07 '16 at 01:23
4

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.

Esailija
  • 138,174
  • 23
  • 272
  • 326
2

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

Fawntasia
  • 347
  • 2
  • 6
0

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.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • 1
    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? – Dan Herbert Jul 04 '12 at 16:53
  • @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. – Madara's Ghost Jul 04 '12 at 18:18
  • 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. – boxmein Mar 31 '18 at 12:51
  • 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. – Josh Powlison Dec 12 '18 at 21:04
  • 1
    @JoshPowlison Because the answer was written in 2012 when the technology was far less mature :) – Madara's Ghost Dec 12 '18 at 22:10
0

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.

Ja͢ck
  • 170,779
  • 38
  • 263
  • 309