
Show HN: HTML5 Video Player in TypeScript - matvp
https://github.com/matvp91/indigo-player
======
Ambroos
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.

~~~
matvp
You're more than welcome to contribute! Good ol' days!

------
mig4ng
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!

~~~
matvp
Thanks for the suggestions!

1\. Absolutely, it's on my radar.

2 & 3\. According to me, the volume button seems off in mobile. I think I'll
remove it completely on mobile devices, people are used to lowering the volume
with the physical buttons (assumption). What do you think?

~~~
mig4ng
Another suggestion:

\- Add possibility to watch the player on landscape mode even when this option
is disabled in the device settings, I'm not sure it is possible but if so it
would be a great feature :P

~~~
matvp
Do you mean something like: "force the player in landscape mode when you hit
the fullscreen button on a mobile device?". I like it, YouTube does that with
it's mobile apps and I find it practical.

~~~
mig4ng
> Do you mean something like: "force the player in landscape mode when you hit
> the fullscreen button on a mobile device?". I like it, YouTube does that
> with it's mobile apps and I find it practical.

Exactly, I also find it useful and get annoyed when I have to manually
activate landscape mode on my device to get the player to use the whole screen
(I have auto rotation disabled most of the time).

------
btbuildem
How is this preferable to using the <video> tag?

~~~
colde
The <video> tag for instance doesn't support MPEG-DASH and HLS (outside of
Edge and Safari). So if you want to do DRM or live streaming, that isn't
supported. Thats why this project bundles shaka-player and hls.js

~~~
leshow
You can use DRM and html5 video,
[https://en.wikipedia.org/wiki/Encrypted_Media_Extensions](https://en.wikipedia.org/wiki/Encrypted_Media_Extensions)

" This allows the use of HTML5 video to play back DRM-wrapped content such as
streaming video services "

~~~
colde
Yes, that is what is used with MPEG-DASH and HLS too. But none of the DRM
systems implemented (beyond ClearKey) is used on just pure MP4 files. So while
EME works in either case, nobody is doing it with the file formats natively
supported. It's pretty much always in combination with
[https://developer.mozilla.org/en-
US/docs/Web/API/Media_Sourc...](https://developer.mozilla.org/en-
US/docs/Web/API/Media_Source_Extensions_API)

------
andyidsinga
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](https://github.com/sampotts/plyr)

------
melcor
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.

~~~
matvp
Hey, thanks! You're totally right, I have some time during the weekend to
implement this.

~~~
fasterthanlime
As long as you're taking feedback (I don't mean to be overwhelming!) - any
idea why exiting fullscreen resets the scroll position to 0?

Try scrolling down to the player, entering fullscreen, hitting Escape, you're
back to the top of the page.

~~~
matvp
Noticed it too, I have no idea yet. I use a wrapper around the native
Fullscreen API's
([https://github.com/sindresorhus/screenfull.js/](https://github.com/sindresorhus/screenfull.js/))
and it doesn't do anything fancy. Interesting, I'll have a look at it but I'll
put it lower on my prio list if you don't mind.

------
hawski
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.

~~~
JeremyBanks
iOS's default video player controls have done this for eight years:
[https://lifehacker.com/5811660/how-to-control-the-audio-
and-...](https://lifehacker.com/5811660/how-to-control-the-audio-and-video-
scrubbing-speed-on-your-iphone)

~~~
hawski
Thank you! Why such a useful thing was not copied by everyone (especially by
YouTube and Netflix) is beyond me. I have to give Apple the credit for those
tiny details.

~~~
llao
Probably patented.

~~~
JeremyBanks
Disgusting, but probably true.

I haven't been able to find an exact match, but this overly-broad-yet-approved
patent might encompass it, and the filing date seems to fit:
[https://patents.google.com/patent/US9069452](https://patents.google.com/patent/US9069452)

------
kohanz
Nice work! As someone that uses
[https://github.com/sampotts/plyr](https://github.com/sampotts/plyr) in one of
my projects (and react-plyr), what are the main differences between the two
players & designs?

~~~
Ambroos
Plyr is really good and has an impressive UI and accessibility. But there is
no way extend the player with new complex functionality or a tighter
integration with Shaka/hls.js/other ad providers/...

I think Plyr can be seen as a better and unified UI on top of a <video>
element, while this is an extensible player 'framework'.

~~~
kohanz
Excellent answer - I get it now. Thank you!

------
flixic
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.

~~~
matvp
Thanks for the feedback, this small feature was already part of my roadmap. :)
Will hit production soon!

------
VikingCoder
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?

~~~
matvp
I'm sorry, it was wrong on the Github page, fixed.

------
colde
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?

~~~
Ambroos
The way plugins/backends work in this is fundamentally different. Video.js at
it's core does very little and doesn't provide a very strict API. The result
tends to be that every ad provider you add on does things slightly
differently. If you want to build advanced metrics on top of a video.js
instance that can use two different ad providers, it's likely you'll have to
manually fix up the ad events to make them track correctly. This project
includes base API definitions for all important ad events that other
extensions can hook into with set guarantees on how they'll behave.

Another thing is how extensions are dealt with here. In video.js, if you need
DASH support, you'll add videojs-contrib-dash and dash.js. Together that's at
least 500kB of JS extra. Even in Safari where you won't need any of those,
you'll have to do some hacking to avoid loading that JS for no reason. In
Indigo here, dynamic bundle loading is core to the extension setup. When
reading a config there's a lightweight check to determine what library to use
for playback (if one is needed at all), and it'll only be loaded when it's
necessary. In Safari, where you generally don't need any libraries, nothing
will be loaded. In Chrome, you'll load Shaka when you want to play DASH, and
hls.js when you want to player HLS. Indigo makes that very easy (and a
default), video.js makes it hard.

These are advanced problems though. You're not likely to hit these issues with
video.js if all you do is play a simple stream without DRM and with one single
ad provider. But the solutions to those issues that are a core part of this
project actually provide benefits in all situations and make development
easier, so it's a net win for everyone in the end.

~~~
nbpalomino
Thanks for this response, it gives us (newbies) a better insight for choose a
proper tool...

------
elcomet
Does it support subtitles ? I've been looking for a video player that supports
uploading subtitles, or loading then from a url

~~~
matvp
WebVTT, yes. [https://matvp91.github.io/indigo-
player/#/Configuration?id=c...](https://matvp91.github.io/indigo-
player/#/Configuration?id=captions)

------
vernie
When will we move on from Big Buck Bunny?

~~~
vdnkh
Hopefully never

------
danabrams
really awesome.

