V4 Planning & Ideas

[sampotts]

Plyr's getting to the point where the majority of the bugs are due to managing state and the UI. I've wanted to build it using a proper framework such as React. I'm hoping to get some input from others on the most suitable framework. Please vote here: https://twitter.com/Sam_Potts/status/1276863183051845633?s=20

Whichever path is taken, there would still be an easy way to embed a player without requiring knowledge of the framework.

The aim of v4 would be to fix the majority of remaining bugs plus some improvements:

• A proper plugin framework (some work has been started on this in a PR)
• Easier restyling of the UI
• Lazy loading
• Smaller bundle size
• Improved UI performance

[sparkktv]

Joomla Plugin Keep YouTube support but make it easier to turn off plugin.

[germanasehudiax]

There needs to be manual quality selector for HLS.js / dash.js source in v4! It is much needed feature

These days most websites use adaptive streaming

Thanks :)

[jackguoAtJogg]

I would vote for React and I would like to have a plugin system for plyr.io and I would like a trimmer plugin built-in with plyr.io.

[Nataliya85]

Hello, please, if possible, make the player's bar disappear when you move the mouse cursor away from it. For example, we are building a drawing - the viewer pauses to see the details, but because of the bar strip, the drawing is not visible.

[abazeed]

I have some ideas:

• Having multiple VAST tag support, so if one tag didn't fill, the next one would try to.
• When playing a live stream, show a sign indicating that this is a live stream.
• Having a plugin to support Dailymotion videos.

[lucaguindani]

Adding "start" & "end" options to choose the offset of the media, like the following videojs plugin https://github.com/cladera/videojs-offset.

[ixperiencenl]

Vimeo Showcase support please :100:

[jonastg]

Good points to consider for a new version! I think that rebuild the player under an specific framework is not the best idea because it won't be available for others. In this way the best option could be to rebuild it as a web component and maybe to use something like stenciljs could simplify the integration with most used frameworks.

[omenking]

I used Plyr in my platform ExamPro because it provides a seamless experience between Youtube and Vimeo and self-serve on-demand videos (I use all those types of sources).

Our platform is built in mithril.js If this video player is rebuilt in React, would I even be able to use this Plyr anymore?

According to React:

React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React.

https://reactjs.org/docs/integrating-with-other-libraries.html

So as long as it works, I don't think it matters what framework you use as long as it has a very small javascript footprint.

If you like React then you'd likely want to look at preact which has a smaller footprint. https://preactjs.com/

[jeffbski]

If you are solving the problem of state then I'd suggest using something like xstate this will easily let you keep state under control and should simplify your logic considerably. It will work with vanilla js or any framework as well.

If you are looking for converting the UI work then my preference is react/preact using functional components. These will be super simple if using xstate to manage the state for you. Though maybe if xstate takes away most of the state issues, you won't need to use UI framework/library.

Some have suggested web components as the most compatible approach, however it could leave react people out of luck since not all of the custom web component events and things are supported by react (though preact does support them well).

I find it hard to justify anything besides functional react/preact components. So easy to create, test and wonderful pre-build components to choose from, active community, scales well.

[kjetilge]

Build it as a standard web component using Stencil.

Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.

[MacMaru]

Having worked with angular 1 & 2, ionic, vue2 and vue 3, I would go for Vue3. Vue is just so much more pleasant to work with and easier to get started. Choosing the standalone reactivity API from Vue3 does not limit any other framework's options.

@sampotts get in touch if you'd like to discuss contributing as I'm running into several outstanding issues at this point and would rather fix the source than create workarounds.

[deepansh96]

Please add support for lesser known mobile browsers. MIUI Browser, Vivo Browser, Opera Mini

Youtube embed of Plyr does not work on these browsers. We're building a non profit org to help Indian rural kids learn online through videos, and Plyr has been a very important player in this.

However, we're stuck! Almost 50% of the students use these low end phones (Mi, Xiaomi, Vivo, Oppo etc) and these have their default browsers (most of them are built upon WebView). Our pilots show that except Chrome, Edge, and other good browsers, the Youtube embed for Plyr "does not" play on those browsers.

Having robust support for Youtube embeds in low end browsers would be a game changer!

And talking about framework, we're using Vue 3 and it's simply amazing.

[calvintam236]

Any chance #112 is in v4 roadmap?

[Clauber]

It would be nice if we could add customization to the settings menu. What I mean by that is that I want to add an Audio options where the user could choose the audio of the video. I tried doing this with the HTML, but I just noticed that this is one of the current limitations.

[d4lv]

overlay text/buttons or something to have the option to add time when to show the function and when to end like this https://github.com/anuditverma/videojs-overlay-hyperlink#readme

and resume option when you refresh the page..

[just-tom]

I think something that is needed in the space at the moment is a rock solid video player for SSR based frameworks (next.js/nuxt.js).

I have attempted to integrated most modern players into a NuxtJS project multiple times, for a UGC live streaming platform, without a lot of luck. Most of them you can get rendering on the page perfectly fine, but anything more advanced, use of plugins or modules etc fail or arent stable enough.

Or alternatively if someone has managed to do this, some useful, walkthroughs, guides, documentation on how would probably benefit a lot of people that are wanting to use video players like Plyr in SSR projects.

[kjetilge]

Some times I need to crop video and / or force a different aspect ratio dynamically for optimal responsive design. It's a mess involving absolute positions and z-index to cover parts of video and so on. It would be nice if this was built in. (Not only for youtube)

[ajgagnon]

I would vote for web components as it would allow you to use Plyr in any type of framework with small overhead. Using something like Stencil would help with development and browser compatibility.

You'd also get the added benefit of shadow DOM, so no unwanted style inheritance and leaks.

[gurupras]

Anything we can do to help with v4?

[NatanielRegula]

I would love to see it support svelte js framework

[hoangvu12]

Add settings button for custom html controls. Thanks

[x3221]

Would be great if support for ssa subtitles could added along with multiple audio/subtitle tracks

[Akash187]

Please add support for lesser known mobile browsers. MIUI Browser, Vivo Browser, Opera Mini

Youtube embed of Plyr does not work on these browsers. We're building a non profit org to help Indian rural kids learn online through videos, and Plyr has been a very important player in this.

However, we're stuck! Almost 50% of the students use these low end phones (Mi, Xiaomi, Vivo, Oppo etc) and these have their default browsers (most of them are built upon WebView). Our pilots show that except Chrome, Edge, and other good browsers, the Youtube embed for Plyr "does not" play on those browsers.

Having robust support for Youtube embeds in low end browsers would be a game changer!

And talking about framework, we're using Vue 3 and it's simply amazing.

@deepansh96 did you know that Plyr does not support quality selectors for youtube? What is your workaround for this.