Plyr: Video quality options (HTML5, YouTube, Vimeo)

[donnygunawan93]

please add video quality option for youtube

[sampotts]

Will do. good idea 👍

[sampotts]

From #220 @thelamborghinistory

First of all I just want to say I came here from PH and I instantly fell in love with this player (not only I have a crush on it but it also came up at the perfect time on my screen ;)). So big kudos to you guys.

However, I am curious if it's possible to integrate an option to switch quality of a video like YouTube has (I think half of the functionality for such a feature is already done with the plyr.source() method, so there might just remain a nice dropup menu for the resolution options). What do you think?

From #245 @tamanhquyen

I have created player using your plugins . But i can't change quality on vimeo source . Please help me . Thanks a lot!

[gino8080]

Definitely need quality option for Vimeo on this great player!

[Parasoul]

Need the video quality option for Youtube !! ^^

[masinerija12]

Please add a quality change option for html5.
Would use this on all my sites.
Best looking and fastest html5 player ever!
10/10

[shutterarmy]

Eagerly waiting for the Quality change Option for YouTube like all the others. Amazing player BTW!!

[sampotts]

It's coming along...

[shutterarmy]

Yes!!

[masinerija12]

Looks awesome man. Can't wait.

[MelchnerRoman]

+1 need this

[cwbmuller]

@SamPotts looking great!

[hutanatu]

Looks awesome man. Can't wait.

[hitnology]

@SamPotts Can't wait this feature.
I want to change my website and waiting for you since may=.=

[robguy21]

Is there an ETA for this feature?

[Abdalrhmam]

Great work

[diasfelipe]

Looks good, can't wait.

[singleseeker]

How`s it going?

[aolko]

Is it done and can be pushed to the master branch?

[sampotts]

No, but my baby son is and is growing well. Sorry, he takes priority right now.

[tonmoy-ajize]

Waiting for this badly.

[sampotts]

I've been managing to squeeze in some more time here and there in between changing nappies and getting the little fella to sleep. Sorry it's just been a bit more complicated than previous changes given all the new UI components and having a kid in the middle of it wasn't well planned.

This is going to be launched along with:

• Multiple caption support
• More advanced loop support
• Speed controls

I'm getting there just hang in there 👍

[POPSuL]

Great! :+1:

[tonmoy-ajize]

It looks great ... Not it became more teasing than before 👍

[CalebKester]

@SamPotts let's us know if you need help testing this. I'd be happy to help out in what ways I can. I've been using your library in a vuejs project and really enjoying it.

[sampotts]

Cool - I'm hoping to get a working version up and running in develop soon. Just trying to find more time.

[mkdub]

Hey Sam,

How's life juggling the baby and code, I can't even imagine! Hope alls been well.

I am looking forward to your new release of features that's coming our way soon, I had a quick question for you. Will we be able to set the default for the vimeo links to load in HD? I am currently building a website that the user is not able to change controls to the player but I'd still like to load the videos in HD.

Take care!

[sampotts]

Hey,

I'm getting there slowly. I keep chipping away at it when I get a few minutes.

Vimeo's API is fairly limited and doesn't allow control over the quality like YouTube does unfortunately. It seems to be "auto" the majority of the time for me - mostly loading in HD.

Nice VWs! I have an R36 wagon and Audi S3 8L myself 👍

[xdajay]

Hey @SamPotts .

First of all, Thank you for making such a great HTML5 player 👍
Video Quality option for Direct MP4 Video will be there?
If yes, Please let me know, Will integrate on https://burffee.com

[ewwink]

any update?

[sampotts]

Nope, still working on it. You'll see here when there's updates. Sounds like we'll have a load of testers 👍 I'm trying to find time where I can to get it done but as I'm sure you're aware (judging by your avatar) - there's a shortage of time when you have a kid.

[ewwink]

I understand, OK we will wait and thanks for your work and time.

[An0nymous0]

Quality selection function What time to launch？

[sampotts]

See above. Plyr isn't a commercial, paid product. I do it in my spare time for free.

[mkdub]

I think if there's enough people here that are requesting certain updates, we should all come together and donate to help Sam. We should make sure it's worth his time to put the effort to make something we all use even greater.

[tonmoy-ajize]

Totaly agreed to @mkdub .. I am ready to send some help to Sam.

Looking forward to Sam if he can really give us some time ...

[jwjcmw]

Just a reminder that there is a donate link in the readme...use it (I'm about to).

[sampotts]

Thanks for the donations guys. Really nice of you. I'll set aside as much time I can this weekend to make progress on the remaining items on my list. 👍

[mkdub]

To save people time, as we all now understand time=money.

Here is the direct link to donate. Anything you can put in will go a long way, it's not just for this feature but everything else that will keep this great plugin at the top.

[henryschmieder]

@mkdub Awesome, just sent some support Sam's way. Very much looking forward to seeing the HTML5 HD switch come to live. I can already see it in the dev branch for Youtube. Awesome.

[aolko]

_...and then most people forgot about this_

[sampotts]

_...and then most people forgot about this_

I'm not sure what you mean? No one's forgotten and I've been putting in as much time on it as I can. So far it only works for YouTube and their API is pretty flaky in this area. The video will play back with "auto" as the default (they determine it based on connection) and from there you can only increase quality it seems. i.e. attempting to go from 720P to 1080P is fine but downgrading doesn't seem to work. The way the API works is you "suggest" a quality and it may or may not change the actual quality - you listen for an event to indicate the quality has changed.

Vimeo does not expose the ability to toggle from SD to HD and vice versa. They don't allow a lot in their API but what they do allow works well.

HTML5 quality control will have to come later, I'm not sure how to tackle that one quite yet.

The main delay is that I'm trying to do too much at once really, the main features in v3 include:

• AirPlay support
• PiP support
• iOS inline playback support
• Improvements to the setup (a proper constructor)
• Multi language captions support
• Improvements to looping options

...accompanied with a fairly hefty re-write in preparation for ES6 and making the lib more modular.

[henryschmieder]

@sampotts awesome Sam. Thanks for the feedback and thanks for putting the effort in besides busy family life! In terms of the HD toggle for HTML5, would it be possible to have a way to extend the controls with a view / icon and registering a custom callback so those who need it might be able to implement it themselves? Same for a HTML5 download button.

[EnziinSystem]

@sampotts , thanks so much.

[POPSuL]

@sampotts, the quality selector will be implemented only for YouTube/Vimeo, or for type: 'video' will also be implemented?

[ajoykarmakar459]

When the quality features add in your product?

[SadeqRasheed]

Thank you for this amazing player, can i get an early access somehow ? i really need the quality options even if they are not stable 💃

[friday]

@SadeqRasheed: You can access v3 in the develop-branch. I'm already doing that (only for subtitles), but it's not recommended. Some features are partially implemented and will break unless you disable them.

[sampotts]

Yeah as @friday said really. It's still buggy at the moment. I am chipping away at it as much as I can and am close but still doing a lot of testing and fixing bugs. This version should be a lot more stable as a result but again, I can't guarantee when it will be done other than as soon as I can get it out the door.

As for @POPSuL for now it'll be YouTube only. Vimeo doesn't expose their HD toggle. HTML5 will follow soon after (and should be relatively straight forward) but I want to get it out rather than keep delaying.

[jeffreymeng]

I've just found your library. It's Awesome!

Just one question:
Is there going to be some sort of an api to add your own options to the popup?
Like a function to add a component, and links within that component, and each link runs a callback function(or something like that)?

[mayeaux]

Could really use this 🙃 +1

[marceloavf]

Any update about YouTube option @sampotts ?
Thanks!

[aolko]

any update on html5 switching?

[StefansArya]

switch to the development branch to see the current progress

[LukasMarques]

@sampotts is it possible to implement a quality selector for video element? I think this is much more easier then youtube and vimeo APIs... In my case, for example could be used with AWS S3.
I was thinkin in something like this:
<video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin> <!-- Video files --> <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4" quality="720p"> <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-FullHD.mp4" type="video/mp4" quality="1080p"> </video>

[sampotts]

The theory part is easy. Yes, it's easy in _theory_. Depends if we want to support multiple source formats etc - e.g. webm with fallback to mp4, etc

[ewwink]

wow.... after 2 year still not released, it should be not very hard. After my comment above few days later I created plugin for Clappr for this functionality. just for idea https://github.com/ewwink/clappr-youtube-plugin

[aolko]

@ewwink as you can read above:

I've been putting in as much time on it as I can

[sampotts]

He struggles with reading I think.

@ewwink Going by your avatar, you either have a child or are a child yourself so you know how much time they take up. If it's not so hard, where is your pull request? Did I miss a donation from yourself? If so I'm sorry!!

I have to repeat myself over and over seemingly; open source is quite often written by people for free in their spare time. Be thankful, contribute, assist. Anything but sit back and moan like a child.

v3 is in beta. Check it out. It doesn't have HTML5 quality options yet but I will work on that next. It was a major rewrite so it took some time. I hope that's ok with you. I'm sorry I let you down!!

[LukasMarques]

Ok, thanks for your time!

[henryschmieder]

No need to justify, @sampotts. I think I can speak for the majority here when I say that we're grateful for all your effort you put in, in the time you have.

[friday]

Exactly. I don't have a family/child but I still haven't been able to use my spare time to develop and maintain something as popular as plyr. So instead I'm very grateful Sam has pulled it off. If you think you can do better. Just do better!

[sampotts]

Thanks fellas 👍

[mkdub]

Let us know if there's anything we can do to help, test, write, whatever you need.

Edit: Just played with the Beta - changing the quality with Youtube is smooth, Nice work!

[Droppers]

My compliments for this player, so far it works really smooth!

I don't want to be rude, but is there an ETA for the HTML5 quality options? A few months, half year?

[friday]

@Droppers This is part of https://github.com/sampotts/plyr/issues/766 due to release very soon. It is implemented, but not for HTML5 yet, and the youtube api seems to ignore quality change requests (https://github.com/sampotts/plyr/issues/793#issuecomment-371278521).

It's hard to do this smoothly with HTML5 video unless it's a stream btw. I'm not sure but I imagine this is why html5 video hasn't been implemented yet.

[Droppers]

@friday I am probably missing something, but I don't get why HTML5 video would be difficult.

I will try to implement it myself and I will experience it.

[sampotts]

Go for it. Just make sure you remember how the cascading sources work, i.e. if webm is specified and supported, that's used, if not mp4, etc

[friday]

I think it's easy to implement, but hard to implement smoothly, without pausing or getting jumps. HTML5 Media Fragments for example aren't that precise/granular and neither is the html5 timeupdate event. For a smooth effect you may have to preload another html5 video and swap.

Good luck!

[henryschmieder]

@Droppers , cool. Please leave a note here how you're getting on with that.

[samanmohamadi]

Is there any future plan to support changing video quality using shaka player?

[sampotts]

I'm working on the HTML5 quality selection at the moment. Will look at Shaka after...

[friday]

Perhaps you could implement the vanilla HTML5 video first, but allow overriding the actual switching with an event listener? That way you wouldn't have to detect, implement and support individual APIs like shaka, hls.js and dash.js but still work with them. Getting the sources list should be the same for all of them right?

[sampotts]

I think they'd be similar but I'm really not too familiar with Shaka, HLS, etc. I really need to brush up in those areas.

The way I'm doing it currently is by using markup like this:

<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm?480" type="video/webm" size="480">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4?480" type="video/mp4" size="480">

<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm?720" type="video/webm" size="720">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4?720" type="video/mp4" size="720">

<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm?1080" type="video/webm" size="1080">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4?1080" type="video/mp4" size="1080">

The issue I foresee is the compatibility of manual selection vs selection via media queries so I'm going to have to do a bit of testing there...

[friday]

Manual vs automatic switching could be a problem. I don't know much about it, but Imagine it could be handled in an event listener-implementation as well in that case.

Edit: Remove hls.js comment that was inaccurate (I mixed things up)

[sampotts]

I'm not sure the native element fires an event when it switches via media query. Perhaps loadstart but I'd have to do more testing.

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

[sampotts]

The good news is I have the basic functionality working. There is a flash while the new source loads and the poster image is shown. I'm not really sure how that can be avoided other than somehow preloading the other video which would get really complex I'd imagine. Currently it's just swapping out the source.

Some bad news. It appears YouTube are removing the option from their API! See the last comment here: https://issuetracker.google.com/issues/70440398. It was linked to from my issue here: https://issuetracker.google.com/issues/74463069

[sampotts]

So it looks like my solution with the HTML5 quality selection breaks the media query functionality anyway so I think they'd be mutually exclusive. It's a shame there's no way to set an active attribute on the <source> element to force it to be active. Also disabled while we're at it.

Anyhow, I've pushed v3.1.0-beta.1 which includes HTML5 quality selection. I still need to document it properly but effectively you specify a size attribute on the <source> elements and then a menu is created based on that. You can have multiple <source> for the same size with different mime types so the cascading <source> mechanism works as before.

Check it out here:
https://plyr.io/beta

[aolko]

btw, also peek at this implementation (for a different player) https://github.com/clappr/clappr-level-selector-plugin

[sampotts]

@aolko Not sure what's going on in that plugin. Pretty bad code: inconsistent formatting, strange variable names, and no comments.

So, I pushed this to master and it's now up at https://plyr.io

[zacksiri]

@sampotts will this work for HLS as well? If not how can I help? happy to submit a PR if you can point me in the right direction of where to start.

[friday]

This is implemented now for HTML5. For Vimeo it's not supported/possible (at least without a hack). For YouTube it was supported. Sam implemented it, but YouTube remove the support on their end shortly after :( hls.js, dash.js and Shaka player is still not supported. There are a few assumptions in the architecture that makes this a little hard to implement.

[mu7mdmagdy]

there is not way to add quality list for vimeo ?? after api V.3 i think it become easier !

[AliHaiider]

@friday @sampotts any update about to add Quality for vimeo video?