With the power of HTML5 and the ease of adding multimedia through technologies such as WordPress oEmbed, anyone can add compelling video or audio content to their website. And while it’s great that default media players are included from a purely functional standpoint, much more can be done to improve the user experience.
The default player may provide basic functionality, but it doesn’t necessarily match your branding or offer some more advanced features.
Audio Player UI Snippets
Draggable Playlist by Antoinette Janus
The fact that you can drag this audio player around your screen is incredible. But even better is the simple and smart UI that Antoinette Janus has created. Scrolling through the playlist and playing the selected track is quick and painless.
Accessibility Built In by Joe Watkins
It’s a simple player, indeed. But Joe Watkins has created a terrific alternative UI for accessibility. The text-based buttons for play and pause ensure that anyone can consume the media, and the ability to view a transcript is just brilliant.
Material Design Comes to Audio by Michael Zhigulin
Spinning Some Vinyl
The concept here is just too cool. Matt Stvartak’s player is basic in functionality, but the rotating vinyl that pops out of the sleeve is a standout design.
Video Player UI Snippets
Smooth and Responsive by Matt Stvartak
Part of the idea behind HTML5 media was to ensure that mobile devices could access the same content as desktops (as opposed to Flash). Simon Goellner’s video player handles responsiveness with ease, and the fact that it can be styled with some simple CSS is most welcome.
Labeled Controls by Tadaima
What’s nice about Tadaima’s HTML5 video player is that each item on the control bar shows a text label when the user hovers over it. While video controls are generally intuitive, adding this extra touch ensures everyone knows exactly what’s happening.
Ultimate Accessibility by Joe Watkins
We mentioned Joe Watkins’ audio player above, but his video player also deserves some love. There are options for transcripts, closed captioning, sign language (which opens a separate video panel on the side), and descriptions. It’s everything you need to bring accessible video to your site.
Video That Moves With You by Charley Pugmire
A big trend we’re seeing lately is the ability of a video to “move” along with the user as they scroll down a page. Charley Pugmire has built a nice example of this. It’s a full-width YouTube video at the top of the screen and then shrinks into the sidebar on scroll.
The examples above run the gamut from simple to turbo-charged. But one thing that stands out is the ability to create a media player that matches your desired style and functionality.
And it’s also encouraging that making these UI examples accessible to everyone is on the mind of more than one designer.
There is any number of ways that we can take the plain old media player and turn it into something special. Hopefully, these UI snippets will inspire you to go beyond the basics.