Plyr: 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.