How to Create an Video Player in jQuery, HTML5 & CSS3

Topic: jQuery / CSS3
Difficulty: Intermediate / Advanced
Estimated Completion Time: 45 mins
In this tutorial we will code an Video Player from
Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the
HTML5 MediaElement API.

Step 1 – Downloading MediaElement.js

First we need to download the “MediaElement.js” script and extract it. Then from the “build” folder we need three files:

SEE ALSO:
AngularJS: A Detailed Guide for Beginners
flashmediaelement.swf
mediaelement-and-player.min.js
silverlightmediaelement.xap
Then copy all these three files to the same directory, I will copy for my “js” folder.

Step 2 – HTML Markup

Now, we need to link to the jQuery Library, we can host it locally or use the one
hosted by Google. Then we need to link to “mediaelement-and-player.min.js” script file and the CSS file. All this three files need to be inside of the

Are you looking for responsive website templates and online website builder?

Get
Startup Design Framework now!

Use coupon code START50 for 50% off!

To create the video player we only need to add the new HTML5 video tag. Then we will add some attributes to the video tag: the width and height of the video and the poster. The poster is the image that you can add to be shown on top of the
video until the user press the play button.

Now we just need to add the following code to load the video controls and to set some settings. The settings that we will add are:

alwaysShowControls – true to always show the video controls and false to hide on mouse out.
videoVolume – to make the volume slider be horizontal.
features: ['playpause','progress','volume','fullscreen'] – here we’ll set what controls we want to add on the video.
For more settings take a look at “MediaElement.js” Documentation.

Step 3 – Video Basic Styles

Let’s start by adding some reset styles to the elements that we will use.

Then we’ll add the general styles to the video container. All the CSS properties that we are using in this step are needed to create the video container layout. This will not create any styles to the video; it will only position all the
video elements in the right place.

Step 4 – Controls Container

We will start to add a big play button to the center of the video container.

Then we will style and position the video controls container. We’ll position it at the bottom, give it a 34px height and add a background color. We’ll use RGBA to make the background transparent, but RGBA is not supported in older browsers so we’ll also
give a fallback using RGB. Then we will add some buttons general styles and add the sprites images. If you don’t know what CSS sprites are or how to work with theme take a look at this

article.

Step 5 – Video Control Buttons

In this step we will position the buttons in the right place. So basically what we will do here is: position each button on the controls container, set the width and height of each button and position the background image in order to display the right button.

Step 6 – Volume Slider

To style the volume slider we’ll position it, then add the width and height values, and rounded corners.

Step 7 – Progress Bar

The progress bar stylings are basic. We need to position it on the top of the controls container, add some background colors for each state (all and loaded time). For the current time we will set the width to 0 and it will be automatically
updated when the movie is playing.

Step 8 – Progress Bar Handle & Current Time Tooltip

In this step we will add the progress bar handle and the tool tip that will show the current time on hover. So we will adjust the position, add the background images, set the widths and heights, and some typography styles.

Step 9 – The Green Gradient

To finish our tutorial we only need to add a green CSS3 gradient that will be used on the progress bar and volume slider.

Conclusion

We’ve successfully coded this Video Player. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials
and articles.