by Ambroos on 1/18/19, 2:25 PM
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.
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.
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.
by mig4ng on 1/18/19, 2:38 PM
Amazing job, I have a few suggestions on how to improve its UX:
- Clicking the video should pause/play;
- 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;
- Interacting with the volume UI on mobile should reset the time until the UI hides, the UI hides while I'm ajusting the volume.
These are a few points I think should be improved, I'd love to hear others opinions on whether or not these make sense :)
Keep the great work!
by btbuildem on 1/18/19, 2:24 PM
How is this preferable to using the <video> tag?
by andyidsinga on 1/18/19, 11:56 PM
Thanks - I've been using "Plyr" [0] for some personal video projects. Interesting to compare features and see this one done in TS.
[0] https://github.com/sampotts/plyr
by melcor on 1/18/19, 2:12 PM
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.
by hawski on 1/18/19, 3:57 PM
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.
The scale between y=0 and y=720 wouldn't have to be linear.
by kohanz on 1/18/19, 4:04 PM
Nice work! As someone that uses
https://github.com/sampotts/plyr in one of my projects (and react-plyr), what are the main differences between the two players & designs?
by flixic on 1/18/19, 5:24 PM
Really nice UI. Simple, neutral and sharp.
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.
by VikingCoder on 1/18/19, 2:26 PM
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?
by colde on 1/18/19, 2:28 PM
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?
by elcomet on 1/18/19, 9:01 PM
Does it support subtitles ? I've been looking for a video player that supports uploading subtitles, or loading then from a url
by vernie on 1/18/19, 7:36 PM
When will we move on from Big Buck Bunny?
by danabrams on 1/19/19, 12:25 AM
really awesome.