Media Player Demos

Find some demo configs & use cases showing both media player elements, playlists & controls being used in different scenarios to highlight various features.

Default UI

For video, there are two built-in UI layouts, ideal starting points for modern video players.
 
To get started quickly, you can choose the one that closest suits your needs and then just customise from there if needed. By default the controls will disappear after 2 seconds to get out of the way of the video, this can be customised.
Layout 1 -  Default minimalist layout - with centered play button
Layout 2 - ideal if wanting to include more controls underneath a full width time slider. (also contains top/center zones - they just aren't populated by default)

Customising the Player UI

The default UI layouts can be starting points. When using these options all the icons can be changed, controls can be added/remove and changed order within the top/center/bottom areas of the player. 

Tip - Generally, less is more.
Here we're add a time slider within the controls in the bottom zone (rather than enabling the full width above them), changing the time to only show the remaining time and adding some colors (notice the color of the sliders and tooltips).
Here we're using some custom icons in the settings menu & moving the controls around a little.

I'm a popup template!

..because you watched 10 seconds