This is such an elegant summary of why WCs are painful. I wish I had summarized it so well. I'm on the Video.js team and I wrote about my journey on this front as well [1].
Hey there, I'm on the Video.js team! Sounds like your context provider approach is already in the right ballpark!
Some background: our store[1] which was inspired by Zustand[2] is created and passed down via context too. This is the central state management piece of our library and where we imagine most devs will build on for extending and customizing to their needs.
Updates are handled via simple store actions like `store.play()`, `store.setVolume(10)`, etc. Those actions are generally called in response to DOM events.
On the events side of things, rather than registering event listeners directly, in v10 you'd subscribe to the store instead. Something like `store.subscribe(callback)`, or in React you'd use our `usePlayer`[3] hook. The store is the single source of truth, so rather than listening to the underlying media element directly, you're observing state changes.
---
So far with v10 we haven't been thinking about "plugins" in the traditional sense either. If I had to guess at what it would look like, it'd be three things:
1. Custom store slices[4] so plugins can extend the store with their own state and actions
2. A middleware layer that plugs into the store's action pipeline so a plugin could intercept or react to actions before or after they're applied, similiar to Zustand middleware, or even in some ways like Video.js v8 middleware[5]
3. UI components that plugins can ship which use our core primitives for accessing the store, subscribing to state, etc.
I believe that'd cover the vast majority of what plugins needed in v8. We haven't nailed down the exact API yet but that's the direction we're leaning towards. We're still actively working on both the library and our docs so I don't have somewhere I can link to for these just yet (sadly)! We're likely targeting sooner, but GA (end of June) is the deadline.
I should also add... one thing we prototyped early on that may return: tracking end-to-end requests through the store. A DOM event triggers a store action like play, which calls `video.play()`, which then waits for the media event response (play, error, etc.). It worked really well and lines up nicely with the middleware direction.
It’s largely because (1) the React runtime is not bundled so it’s technically not apples to apples, (2) the Web Component includes CSS as well since we’re using Shadow DOM.
Basically few kB for CSS and few kB for a thin “framework” layer for managing attr to prop mapping, simple lifecycle, context, and so on.
We are designing with the goal of supporting more frameworks like Svelte and Vue specifically, even as far as React Native! We just don’t know when exactly yet but a large part of our approach in v10 is to make sure we can deliver the best possible experience to each frontend framework. It’s important for us that the integrations don’t feel like wrappers but truly idiomatic.
In the meantime, we’re hoping our custom elements will act as a good stopgap. Most frameworks including Svelte support them well, and we’re pouring love into the APIs so they feel good to use regardless of which framework.
If you’re interested in peeking under the hood, architecturally we’re taking a similar approach to TanStack and separating out a shared core from the beginning, but with one added step of splitting out the DOM as well to aid in supporting RN one day.
I'm on the Video.js team, just wanted to say thank you! Means a lot and we'd be eager to hear your experience trying it out. Feel free to drop a GitHub issue or discussion post if you ever get a chance :)
From me, this is a massive relief after we just deployed a bunch of videos to Vimeo. The next week they were bought.
I'm a one-man operation. In the order of hundreds of videos served a week. All I want is control over my own destiny. If this and a VPS can do that, that'll be amazing. Thank you for doing this.
Thank you! I’m on the Video.js team, and we’d love for you to try the library out and share your feedback. We’re especially eager to hear from developers who used or tried v8 in the past.
We’re taking a new approach to the library with a lot of new concepts, so your feedback would help us a ton during Beta as we figure out what’s working well and what isn’t.
The motivation for this started with some initial exploration of how native captions are inconcistent and extremely limited with respect to positioning + styling across browsers. In addtion, existing captions work was glued inside player libs and all open-source parsers were ancient (e.g., mozilla/vtt)!
I wanted to modernize it all with newer web APIs such as `fetch` and `ReadableStream` and extend support out to multiple captions formats. I also noticed that a lot of popular players on the web in recent years started adding caption customization options. Turns out accessible captions can be legally enforced!
Do note that accessible captions not only includes sync/timing, but also an adequate set of controls to customize the style of the captions, ensuring they're readable for everyone. You can see an example of this on YouTube when you go to the settings, captions, and click customize.
It just seemed silly that probably every single company is internally building this type of lib which is insanely hard to get right. I built this to serve our accessiblity goals at Vidstack[1] where we're working on enabling you to build a production-ready player quickly.
It took me about two weeks to build this and honestly there's still a lot of areas that need work but it's a great start. I hope you find it useful. You'll find a lot more helpful information in the repo.
I'll also leave you with this YouTube video where Dan Sparacio beautifully explains the complexities of building accessible media captions on the web at Paramount [2]. This is one of my favourite Demuxed talks. In there case, acessible enough to meet FCC guidelines. _Highly_ recommend checking it out to learn more!
[1]: https://www.mux.com/blog/6-years-building-video-players-9-bi...