Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a Video Player component #13196

Open
TheOneTheOnlyJJ opened this issue May 21, 2024 · 0 comments
Open

Add a Video Player component #13196

TheOneTheOnlyJJ opened this issue May 21, 2024 · 0 comments
Labels
new feature New feature or request waiting for 👍 Waiting for upvotes

Comments

@TheOneTheOnlyJJ
Copy link

TheOneTheOnlyJJ commented May 21, 2024

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:

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:

Search keywords: audio video player media component

@TheOneTheOnlyJJ TheOneTheOnlyJJ added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 21, 2024
@flaviendelangle flaviendelangle added waiting for 👍 Waiting for upvotes new feature New feature or request and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
new feature New feature or request waiting for 👍 Waiting for upvotes
Projects
None yet
Development

No branches or pull requests

2 participants