React-player: Determine video source by resolution & bandwidth

[oyeanuj]

Hi @CookPete or anyone else who is using HTML5 Video! This is more of a question/discussion than an issue - so feel free to close it.

So for most people who are going to be doing video upload of any sort, they will probably need to encode it into different formats and different resolutions (360P, 720P, 1080P or 480 * 320, etc). Even if one is only displaying videos in HTML5 player, there are the different sources or resolutions to deal with.

I was wondering where is the best place and method to make that determination? Within the library or in the wrapping component that the user builds? It is probably something that everyone would be duplicating. For HLS, it seems like the HLS manifest might take care of it.. but not sure how to do it for MP4, webm, etc - feature detection for browser/device type, height/width of container or something else?

The most informative link I've come across so far is from video-contrib-hls here: https://github.com/videojs/videojs-contrib-hls/blob/master/docs/bitrate-switching.md

Thoughts?

[cookpete]

Not sure how far you got with this @oyeanuj but I'm sorry this didn't spark any discussion. In terms of dealing with providing multiple resolutions/bitrates from a single upload, you won't get much easier or well supported than YouTube, but I'm sure there are many others that do the same thing.

[oyeanuj]

@CookPete Yea, no responses :/ The two approaches I've discovered in case anyone else stumbles into it here -

1. Allow users to choose bandwidth, like YouTube does.
2. Use HLS/DASH and allow browsers to make that determination. With hls.js support, most browsers are supported already.

I've picked the (2) solution above but would love other ideas!