10 Creative Code Examples of Media Player Design

With the power of HTML5 and the ease 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, so 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. So designers have taken it upon themselves to add creative flair, along with high-end functionality to create some incredibly unique media players. Take a look at some of our favorites below and feel free to experiment with the source code.

Audio Players

Round and Beautiful

This circular audio player from Sebastian Beltz puts the straight edges of a standard media player to shame. It’s quite beautiful to look at, intuitive and the inclusion of sharing/favorite buttons makes it a more complete UI.

Draggable Playlist

The fact that you can drag this audio player around your screen is cool. 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

It’s a simple player, indeed. But Joe Watkins has added in a terrific alternative UI for accessibility. The text-based buttons for play and pause ensure that anyone can consume the media. The ability to view a transcript is just brilliant.

Material Design Comes to Audio

Michael Zhigulin’s use of Material Design on this player is outstanding. From the popular “card” layout to the smooth animations, it fits in nicely with Google’s standard.

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 Players

Smooth and Responsive

Part of the idea behind HTML5 media was to ensure that mobile devices were able to 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 very welcome.

Labeled Controls

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 that everyone knows exactly what’s going on.

Ultimate Accessibility

We mentioned Joe Watkins’ audio player above, but his video player also deserves some love. There are options here 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.

YouTube Playlist

Of course, not everyone hosts their own videos. So having an attractive and easy-to-use player like bachors’ YouTube Channels Playlist is a must-have for many sites. What’s also nice is that this example has a number of customization options.

Video That Moves With You

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 YouTube video that is full-width at the top of the screen then shrinks into the sidebar on scroll.

Media Matters

The examples above run the gamut from simple to turbo-charged. But one thing that really stands out is the ability to create a media player that matches your desired style and functionality. And it’s also encouraging that making this content 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 into something special. Hopefully, these examples will inspire you to go beyond the basics.

The post 10 Creative Code Examples of Media Player Design appeared first on Speckyboy Web Design Magazine.