There are a lot of things you can create with custom HTML5. The new elements make it possible to simplify things as opposed in the past that you need to add CSS to make it work or display.
Two of the good examples are the audio and video elements. Although the audio and video element have a generic look, it can be customized using a jQuery plugin called MediaElement.js.
In today’s tutorial, you will code an audio and video player using the UI toolkits made by Rudolph Musngi, CSS3 to style the elements and the MediaElement.js for the functionalities.
OK, let’s start.
Resources You Need to Complete This Tutorial
UI Toolkits by Rudolph Musngi
jQuery Library (You can use the download version or Google’s Hosted Library)
MediaElement.js
Time and Patience
Custom Audio Player
Download Source Files
View Demo
Step 1 – Download jQuery library and MediaElement.js
To make all things work, you need to download, first, the jQuery Library or use Google’s Hosted Library.
Then, you also need the MediaElement.js script and extract it on your preferred location. Inside the folder of the extracted MediaElement.js, you need the following files:
mediaelement-and-player.min.js
flashmediaelement.swf
silverlightmediaelement.xap
Step 2 – Adding Necessary Links on the Head Section
To start, you need to add the following links to the Head Section. This includes the links to the CSS files, jQuery library and MediaElement.js.
Step 3 – The Markup
Now, create the div that will hold the audio element. You will give it a class of audio-player and inside it, you will put a paragraph element for the title and the audio element itself.
Step 4 – The Script
Now that you had set up the audio markup, you need to add the code below before the ending of the tag.
Notice that you selected the class audio-player that you used to wrap the audio elements. These are the basic settings set for this tutorial; you can check out the mediaelement.js documentation to learn more about the available settings.
Step 5 – The CSS
Next, set up the styles of the custom audio player. First, add some reset styles to make sure that there are no other extra styles on each browser.
Then, style the player container and add the width a height on it and style the paragraph tag for the title.
Next, style the play-pause button. This will be in a form of png sprite image and manipulated using the background-position.
For the Mute and Unmute Control button, use a png sprite image and manipulate the background-position to display each part.
Now, add the following styles for the volume slider. Notice that instead of using an image for the circle icon, CSS3 was used instead using the border-radius property.
The CSS codes below will set the background color and dimension of the time loaded and current time.
Next, add some styles for the time and volume sliders (handle).
Finally, add the styles for the Time Progress Bar tooltip. This will appear when you hover over the progress bar.
And that’s really it! Now that you’re done on the custom audio element. On the next part of this tutorial, you will create a custom video element.
Custom Video Player
Step 1 – Download jQuery library and MediaElement.js
Just like the custom audio element, you need to download first the jQuery library or use Google’s Hosted Library.
Then, you also need the MediaElement.js script and extract it.
The same with the custom audio element, you will again use following files inside the MediaElement.js folder:
mediaelement-and-player.min.js
flashmediaelement.swf
silverlightmediaelement.xap
Step 2 – Adding Necessary Links on the Head Section
Afterwards, you will add the following links to the head section. This will again include the links to the CSS files, jQuery library and MediaElement.js.
Step 3 – The Markup
Now create the div that will hold the video element. You will wrap the video element in a class of video-player.
Step 4 – The Script
Now that you have the markup set up, add the code for the video controls and settings. Notice that you selected the video element and then used the following settings:
alwaysShowControls – This will display or hide the video controls using the true or false value.
videoVolume – This will display the volume slider horizontal.
features: [‘playpause’,’progress’,’volume’,’fullscreen’] - This set up the control for the video.
For this part, you will use the following settings but you can configure more settings by checking out MediaElement.js documentation page.
Step 5 – The CSS
For the CSS, start by adding reset and basic styles to the elements.
Next, you will style the controls. The container will have a width of 100% and a position of absolute. You will use a png sprite image for the play and pause button and manipulate the display of each element using the background-position property.
For this part of the CSS, let’s style the Mute and Unmute buttons. Again, you will use a png sprite image and manipulate its display position using background-position.
Now, add some styles to the Full or Window Screen button. Similar with the play and pause button, for the Mute and Unmute button, you will use a png sprite image file to display each side of the full or window screen element.
Self-explanatory, instead of setting up a pure background width element, you will set it up on an absolute positioning.
The Progress Bar will have basic styles. The loading rail has an extra feature with a class .mejs-time-loaded. This will display how much time the video file has been pre-loaded via streaming downloads.
For the progress bar handle, you will simply create a small circle using the border-radius property with a background color of #ef3a3a.
Next, you will style the tool tip that will show the current time on hover state. You will use basic CSS for this with the :after selector to create a small triangle pointing downward.
Finally, you will set up the background color of the Progress and Volume Bar.
Wrapping Up
There you have it! I hope you learned something from this tutorial, and turn the audio and video players into a fantastic modern design.
This can be done using pure CSS3 styles but it still has poor support, especially on the Jurassic browsers like Internet Explorer 8 and its older versions. The best way to go is to use JavaScript like this MediaElement.js plugin.
Feel free to use these codes on your projects. Let me know about your thoughts regarding this tutorial on the comment section.