Add a Video Player component

[TheOneTheOnlyJJ]

Summary

Right now the only way to play videos in a MUI interface is to use the default HTML video element, which does not conform to the Material Design guidelines. There is a video player shown in the official MD3 docs and it would be a great feature if MUI could provide something similar as a component.

Examples

MD3_Video_Player.mp4

The best example is the one from the documentation. However, here are other libraries that also implement React video players:

• Vidstack.io - Official Website Link - Highly customizable & modular solution
• react-player - NPM Link - Easy to use & versatile; This is what I've used with MUI until now
• Video-React - Official Website Link
• replay - GitHub Link

Motivation

Looking through the official MD3 docs, in the Foundations -> Interaction -> Inputs section, I have noticed a custom video player shown in the demo of the Spacebar control subsection, right at the bottom of the guide page. While it may look like a normal HTML video player at first glance, upon closer inspection it is noticeable that it has a custom progress bar, progress indicator and play/pause central action indicator (that looks a lot like a Floating Action Button).

I have used the default HTML video player (through react-player) in a MD2 application and I can say that the default HTML progress bar breaks stylistic consistency when placed adjacent to a Material UI slider. The default icons don't go well with any Material Icons present on the same page. It just feels out of place when surrounded by Material UI components.

Therefore, taking into account the example from the documentation, I suggest Material UI offers a stylized wrapper around the default HTML video player component so that it is brought in line with the Material Design guidelines.

Besides the intuitive video playing features, there are a few more advanced features such a player could also provide:

• video streaming
• video chapters
• video subtitles (consistent with the Material Design guidelines)
• audio player? Maybe it should be a separate component
• advanced customizability (take a look at how many separate components Vidstack.io provides)

Search keywords: audio video player media component