Video quality options (HTML5, YouTube, Vimeo)

[donnygunawan93]

please add video quality option for youtube

[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: `

<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">

`

[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!

[xblabs]

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!

[xblabs]

@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?

[medzhidov]

@friday here is official vimeo api to get\change quality: https://github.com/vimeo/player.js/

[sampotts]

I'm well aware of the Vimeo JS SDK. Plyr already uses it. However quality selection is reserved for paid Vimeo accounts. Quality selection is already supported and documented for HTML5. YouTube's API for it is merely allows suggesting a quality level and in reality it's ignored 99.9% of the time. It useless.

[medzhidov]

@sampotts It is useful, because youtube\vimeo may set 720p for default, bases on internet connection, but users want to see it in 1080p, because their connection support it. And what is problem with paid vimeo accounts? I can give to developers access to my paid vimeo account, it is not problem. We want to use this player in our projects, but quality selection is really important feature.

[sampotts]

I don't disagree that it's useful. However, as I said, for YouTube their API is useless for it. I opened a bug and they closed it as expected behavior. You could try again.

As for Vimeo, I'd need access to a paid account or at least a video from a paid account then I could add support. I'm surprised no ones given it a go and opened a PR if it's that critical.

[medzhidov]

@sampotts i did it just now, link to video: https://vimeo.com/509541849

[sampotts]

Thanks, I'll take a look.

[Timur0076565]

hi! Is there currently a video quality option for YouTube?

[sampotts]

@Timur0076565 See my comment further up https://github.com/sampotts/plyr/issues/218#issuecomment-774754457

[Timur0076565]

Can I change the default YouTube controls from 0 to 1? This code doesn't work: <iframe :src="${data.src}?controls=1" allowfullscreen allowtransparency allow="autoplay"

[Timur0076565]

@sampotts Can I change the default YouTube controls from 0 to 1? This code doesn't work:

[medzhidov]

@sampotts Can I change the default YouTube controls from 0 to 1? This code doesn't work:

Stupid question. If you wanna use default controls - add default youtube embed with no plyr.

[Timur0076565]

@medzhidov, stupid answer!!!! I wanna use plyr with default youtube controls. This is vary important for my player. If you such a very smart person, tell me how i can do it!

[medzhidov]

@medzhidov, stupid answer!!!! I wanna use plyr with default youtube controls. This is vary important for my player. If you such a very smart person, tell me how i can do it!

I guess Plyr parse link and take only videoId from url, so any params in your link will ignored

[Timur0076565]

@medzhidov, yes, I already understood that !! I need some kind of solution how to add YouTube controls using plyr. Do you have an ideas?

[Timur0076565]

@medzhidov ???

[medzhidov]

@medzhidov, yes, I already understood that !! I need some kind of solution how to add YouTube controls using plyr. Do you have an ideas?

Fork this repo and do what you want)

[Timur0076565]

@medzhidov, Илья, по-моему я задал вполне адекватный вопрос, как мне включить controls = 1, ты же вместо того чтобы подсказать пишешь мне какую то фигню, я повторюсь, если ты такой умный парень, подскажи решение или не лез со своими "Stupid question"!