Plyr to Vidstack Update

[mihar-22]

👋

We've been working really hard in getting Vidstack in the best place possible for all of you over the last year. In that time we've:

• Pushed over 9 packed releases.
• Built 30+ components and 18+ hooks with more to come.
• Added support for autoplay, fullscreen, picture-in-picture, live streams, keyboard shortcuts, audio tracks, text tracks, video quality, and chapters.
• Support audio, video, and HLS (+live).
• Built a custom captions parsing library (see the repo for why).
• Added over 26 examples on how to get building.
• Painfully experimented with how to support as many framework and styling options as possible. Our latest release covers React (Next.js 13 ready) and we've drastically enhanced Vue, Svelte, and Solid with JSX types. In terms of styling options, we have a production-ready default layout, a default theme to extend the defaults and build your own, and the more custom route via CSS or Tailwind CSS.

❓ Where are we at?

We just announced the 1.0 pre-release (tweet). The library from a core and foundation perspective is finally stable. We also just shared our new site and docs! The future of Vidstack will be starting with a heavy focus around managing, building, and shipping media experiences with React and Next.js. Other frameworks will definitely come but because I'm mostly working on this solo it's going to take time unless we raise funds.

In the coming weeks we'll be finishing up the site, finalizing our streaming partnership, finishing the docs, adding the Plyr Layout, and a few more integrations/components. At this point we'll officially release 1.0.

❓ What's different between Plyr and Vidstack?

Vidstack Player has a more mature architecture (we integrated it into Reddit), component building blocks, tons of more core features, more configuration options, cleaner and more standard APIs, much better framework support, more styling options, more hooks, and in general it's specifically designed to help you build your own player. You'll find it covers everything Plyr does but better and more.

❓ What will happen to Plyr?

Plyr will simply be deprecated and archived soon. You can continue to use it as you please but there'll be no patches/releases. We strongly recommend migrating over to Vidstack. If you like the up and running quickly aspect of Plyr then you'll find the Default Layout with Vidstack provides exactly that but more. We'll have a Plyr layout in Vidstack very soon! Sam has a busy schedule but we might end up with both a legacy and modernized version, but again completely depends on time and what we end up discussing going forward.

Thanks and if you have any questions just let me know either here or on our Discord.

[ffxsam]

This is exciting news, and it's great to know you're getting closer to 1.0!

It's a bit of a bummer that Vimeo & YouTube support is being dropped. That's actually one of the selling points of our platform: people can embed either hosted video, YouTube, or Vimeo, and they'll get a unified UI no matter what. No distractions from YT/Vimeo's UI or branding.

I suppose we'll keep using the old Plyr.js for YT/Vimeo embeds, and Vidstack for videos that we host ourselves.

[mihar-22]

I still have the new docs to finish so I'll continue to think it over Sam. I'll keep legitimate use cases like yours in mind. If we change our mind I'll add an update here. I really don't think either platform is great for building custom media experiences. YT because you're locked in to their platform and they don't want you doing custom things, and Vimeo due to quality of experience, limited control, and random pricing hikes/changes on people. There's also everything I mentioned about the super limited embed APIs and maintainence/support from our end. In my experience, it honestly tends to attract the wrong kind of crowd that floods issues and Discord. Either way, I'll never say never and we can continue to think about it 👍

[mihar-22]

Update on embeds. We'll be adding them to not leave anyone in an awkward spot migrating over.

• YouTube
• Vimeo

[ffxsam]

Amazing! Thank you! 🙏

[mihar-22]

Update: the final feature release before 1.0 has dropped and it includes the beautiful Plyr Layout :) It's built with Web Components and React support, and we've kept the same features, styles, CSS variables, icons, and relevant options to make migrating over simpler.

Check out the latest release notes and let us know what you think! You can also head over to our installation page to get started, and see the layout component page for further customization.

[vpreponen]

Any chance we could use video quality similar to how we have used quality with Plyr? I really like Vidstack and would love to migrate to it but as I only have a few static videos I'm hesitant to convert everything to HLS.

[dgw]

I bounce off this migration task every time because of two major concerns/confusions regarding the new library:

1. Multiple qualities seem to require HLS, as @vpreponen mentioned.
2. Vidstack uses a custom <media-player> element, but what do I do if I have just plain <video>s so JS-less clients can still see the element and play the video with platform-native controls if they choose?

Figuring out how to load Vidstack on the necessary pages shouldn't be too much trouble with Webpack in the mix, but I'm definitely struggling with what seems to be a completely different integration model: Plyr enhances the media elements you already have, while Vidstack appears to want to be the media elements.

[mihar-22]

Thanks for the feedback @dgw, I'm sure others share the same pain points. We're actively working on the library and trying to make it better. It is a shift in thinking when working with Vidstack coming from Plyr, as we're trying to embrace the way devs are building custom media experiences, and integrating with a whole bunch of frameworks/bundlers. I'm looking for ways to smooth it out and I'll spend some time before the next release trying to see what I can do.

1. I'm looking into adding multiple source qualities without HLS. I do want to stress that HLS is just a bunch of static files/blobs and it's not as scary as most think. You can host the files just like an MP4. I guess the encoding part is where most get stuck because FFmpeg is not so friendly but I'll be making a free tool to help with this.

2. I agree, we need better built-in progressive enhancement. I'm looking into a few different options right now. Important to note, it's just a bunch of DOM elements so you can do whatever you like. You can easily write your own progressive enhancement script or in your framework's onMount hook replace the <video> element with the <media-player>.

[dgw]

For HLS, a tool that generates segments automatically would indeed help. Supporting multiple qualities without HLS just saves disk space on my end because the "download" version of a video can double as the high-quality source.

HLS could be worth it for auto-quality switching, though. Not sure Plyr is doing anything there with straight MP4s; if I throttle in Dev Tools, I end up having to manually decrease the quality.

On point 2, the thing is that there is no framework. Plyr is great to drop in with a few .mp4 files in a static site (Jekyll in my case) and away you go. No need to write any progressive enhancement script because the library itself is a progressive enhancement over native media elements.

I'll keep an eye on what Vidstack does, especially WRT making it easier to generate the HLS segments. Spitballing, the ideal would be to have a <video> that is replaced by Vidstack using HLS sources if JS is available, with the native element as a fallback and then a download link if all else fails. That just requires support for pointing Vidstack at a video element to replace with its own player, I guess.

(Hopefully the "ideal" above makes sense. I came up with the theory not 10 minutes ago and haven't necessarily thought it all the way through!)

[stsrki]

Hello everyone. I'm in the middle of migrating to a new VidStack provider and I'm stuck on how to bind to events.

This is how I was doing it in plyr so far

player.on('progress', (event) => {
    invokeDotNetMethodAsync(dotNetAdapter, "NotifyProgress", event.detail.plyr.buffered || 0);
});

player.on('playing', (event) => {
    invokeDotNetMethodAsync(dotNetAdapter, "NotifyPlaying");
});

// etc.

I can see in the code that old events are mapped with new library https://github.com/vidstack/player/blob/1b911e73bbbc8614814c232b8dccbdbbbf3ea476/packages/vidstack/src/global/plyr.ts#L884C18-L884C28

But I don't know how to configure them on my side. Anyone can help?