Some extra background: I worked on a predecessor of this with Matthias about two years back. We had to build a web video player with a lot of advanced capabilities, and found that no open source or commercial player framework would give us what we needed as developers to deliver something really good. I've since moved abroad and haven't been involved with this directly.<p>A lot of the ideas we came up with made it into this project, and what Matthias did differently in this iteration (like adding Typescript and improving how you write extensions) look really good. You can consider this to be an alternative to video.js, for example, but with easier ways to build advanced extensions without having to fall back to pretty oldschool ways of doing JS.<p>Matthias' default UI for example is built in React, but there's nothing stopping you from not using his UI extension and building your own that works however you want. Because of the heavy use of Webpack bundle splitting, if you don't use the built-in UI React won't even be loaded, and that approach is core to how this is designed.
Amazing job, I have a few suggestions on how to improve its UX:<p>- Clicking the video should pause/play;<p>- Clicking the volume button on mobile when the volume bar is hidden should not mute the video, instead it should just show the volume bar;<p>- Interacting with the volume UI on mobile should reset the time until the UI hides, the UI hides while I'm ajusting the volume.<p>These are a few points I think should be improved, I'd love to hear others opinions on whether or not these make sense :)<p>Keep the great work!
Thanks - I've been using "Plyr" [0] for some personal video projects. Interesting to compare features and see this one done in TS.<p>[0] <a href="https://github.com/sampotts/plyr" rel="nofollow">https://github.com/sampotts/plyr</a>
Looks pretty good, at first glance I miss the functionality to pause/un-pause by clicking on the video. I believe this is a pretty common functionality that you should consider implementing.
One thing that I would love to have on mobile is an adaptive (?) video seeking. So you touch the "video cursor" and then move: the x axis is for seeking, but y axis is for sensitivity. Moving a finger along the bar (y = 0) is as things are currently - go to the right edge to seek till the end of the video. However moving it along the top edge of the video (y = 720) would only seek in terms of 5 seconds for example.<p>The scale between y=0 and y=720 wouldn't have to be linear.
Nice work! As someone that uses <a href="https://github.com/sampotts/plyr" rel="nofollow">https://github.com/sampotts/plyr</a> in one of my projects (and react-plyr), what are the main differences between the two players & designs?
Really nice UI. Simple, neutral and sharp.<p>In addition to other feedback in this thread, I'd also want the Volume icon to change: show muted state / volume level state without showing the slider. YouTube does this well.
Your example doesn't actually have an element with id "player" in it, even though you getElementById('player'). Is that a broken example, or am I missing something?
Why not use something like video.js which already has a number of pluggable backend and third party plugins supported. Just for the lack of TypeScript?