You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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
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
The text was updated successfully, but these errors were encountered: