Tutorial: Video Player with jQuery, HTML5 & CSS3

Posted by : Magnus Monday 27 August 2012


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:
  • 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
  1. <head>  
  2.     <title>Video Player</title>  
  3.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  4.     <script src="js/mediaelement-and-player.min.js"></script>  
  5.     <link rel="stylesheet" href="css/style.css" media="screen">  
  6. </head>  
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.
  1. <video width="640" height="267" poster="media/cars.png">    
  2.     <source src="media/cars.mp4" type="video/mp4">    
  3. </video>    
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.
  1. <script type="text/javascript">// <![CDATA[  
  2. $(document).ready(function() {  
  3.     $('video').mediaelementplayer({  
  4.         alwaysShowControls: true,  
  5.         videoVolume: 'horizontal',  
  6.         features: ['playpause','progress','volume','fullscreen']  
  7.     });  
  8. });  
  9. // ]]></script>  

Step 3 – Video Basic Styles

Let’s start by adding some reset styles to the elements that we will use.
  1. .mejs-inner,  
  2. .mejs-inner div,  
  3. .mejs-inner a,  
  4. .mejs-inner span,  
  5. .mejs-inner button,  
  6. .mejs-inner img {  
  7.     margin: 0;  
  8.     padding: 0;  
  9.     border: none;  
  10.     outline: none;  
  11. }  
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.
  1. .mejs-container {  
  2.     position: relative;  
  3.     background: #000000;  
  4. }  
  5.    
  6. .mejs-inner {  
  7.     position: relative;  
  8.     width: inherit;  
  9.     height: inherit;  
  10. }  
  11.    
  12. .me-plugin { position: absolute; }  
  13.    
  14. .mejs-container-fullscreen .mejs-mediaelement,  
  15. .mejs-container-fullscreen video,  
  16. .mejs-embed,  
  17. .mejs-embed body,  
  18. .mejs-mediaelement {  
  19.     width: 100%;  
  20.     height: 100%;  
  21. }  
  22.    
  23. .mejs-embed,  
  24. .mejs-embed body {  
  25.     margin: 0;  
  26.     padding: 0;  
  27.     overflow: hidden;  
  28. }  
  29.    
  30. .mejs-container-fullscreen {  
  31.     position: fixed;  
  32.     leftleft: 0;  
  33.     top: 0;  
  34.     rightright: 0;  
  35.     bottombottom: 0;  
  36.     overflow: hidden;  
  37.     z-index: 1000;  
  38. }  
  39.    
  40. .mejs-background,  
  41. .mejs-mediaelement,  
  42. .mejs-poster,  
  43. .mejs-overlay {  
  44.     position: absolute;  
  45.     top: 0;  
  46.     leftleft: 0;  
  47. }  
  48.    
  49. .mejs-poster img { display: block; }  

Step 4 – Controls Container

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

  1. .mejs-overlay-play { cursor: pointer; }  
  2.    
  3. .mejs-inner .mejs-overlay-button {  
  4.     position: absolute;  
  5.     top: 50%;  
  6.     leftleft: 50%;  
  7.     width: 50px;  
  8.     height: 50px;  
  9.     margin: -25px 0 0 -25px;  
  10.     background: url(../img/play.png) no-repeat;  
  11. }  
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.
  1. .mejs-container .mejs-controls {  
  2.     position: absolute;  
  3.     width: 100%;  
  4.     height: 34px;  
  5.     leftleft: 0;  
  6.     bottombottom: 0;  
  7.     background: rgb(0,0,0);  
  8.     background: rgba(0,0,0, .7);  
  9. }  
  10.    
  11. .mejs-controls .mejs-button button {  
  12.     display: block;  
  13.     cursor: pointer;  
  14.     width: 16px;  
  15.     height: 16px;  
  16.     background: transparent url(../img/controls.png);  
  17. }  

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.
  1. .mejs-controls div.mejs-playpause-button {  
  2.     position: absolute;  
  3.     top: 12px;  
  4.     leftleft: 15px;  
  5. }  
  6.    
  7. .mejs-controls .mejs-play button,  
  8. .mejs-controls .mejs-pause button {  
  9.     width: 12px;  
  10.     height: 12px;  
  11.     background-position: 0 0;  
  12. }  
  13.    
  14. .mejs-controls .mejs-pause button { background-position: 0 -12px; }  
  15.    
  16. .mejs-controls div.mejs-volume-button {  
  17.     position: absolute;  
  18.     top: 12px;  
  19.     leftleft: 45px;  
  20. }  
  21.    
  22. .mejs-controls .mejs-mute button,  
  23. .mejs-controls .mejs-unmute button {  
  24.     width: 14px;  
  25.     height: 12px;  
  26.     background-position: -12px 0;  
  27. }  
  28.    
  29. .mejs-controls .mejs-unmute button { background-position: -12px -12px; }  
  30.    
  31. .mejs-controls div.mejs-fullscreen-button {  
  32.     position: absolute;  
  33.     top: 7px;  
  34.     rightright: 7px;  
  35. }  
  36.    
  37. .mejs-controls .mejs-fullscreen-button button,  
  38. .mejs-controls .mejs-unfullscreen button {  
  39.     width: 27px;  
  40.     height: 22px;  
  41.     background-position: -26px 0;  
  42. }  
  43.    
  44. .mejs-controls .mejs-unfullscreen button {   
  45. background-position: -26px -22px; }  

Step 6 – Volume Slider

To style the volume slider we’ll position it, then add the width and height values, and rounded corners.
  1. .mejs-controls div.mejs-horizontal-volume-slider {  
  2.     position: absolute;  
  3.     cursor: pointer;  
  4.     top: 15px;  
  5.     leftleft: 65px;  
  6. }  
  7.    
  8. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {  
  9.     width: 60px;  
  10.     background: #d6d6d6;  
  11. }  
  12.    
  13. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  
  14.     position: absolute;  
  15.     width: 0;  
  16.     top: 0;  
  17.     leftleft: 0;  
  18. }  
  19.    
  20. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,  
  21. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  
  22.     height: 4px;  
  23.    
  24.     -webkit-border-radius: 2px;  
  25.     -moz-border-radius: 2px;  
  26.     border-radius: 2px;  
  27. }  

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.
  1. .mejs-controls div.mejs-time-rail {  
  2.     position: absolute;  
  3.     width: 100%;  
  4.     leftleft: 0;  
  5.     top: -10px;  
  6. }  
  7.    
  8. .mejs-controls .mejs-time-rail span {  
  9.     position: absolute;  
  10.     display: block;  
  11.     cursor: pointer;  
  12.     width: 100%;  
  13.     height: 10px;  
  14.     top: 0;  
  15.     leftleft: 0;  
  16. }  
  17.    
  18. .mejs-controls .mejs-time-rail .mejs-time-total {  
  19.     background: rgb(152,152,152);  
  20.     background: rgba(152,152,152, .5);  
  21. }  
  22.    
  23. .mejs-controls .mejs-time-rail .mejs-time-loaded {  
  24.     background: rgb(0,0,0);  
  25.     background: rgba(0,0,0, .3);  
  26. }  
  27.    
  28. .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }  

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.
  1. .mejs-controls .mejs-time-rail .mejs-time-handle {  
  2.     position: absolute;  
  3.     cursor: pointer;  
  4.     width: 16px;  
  5.     height: 18px;  
  6.     top: -3px;  
  7.     background: url(../img/handle.png);  
  8. }  
  9.    
  10. .mejs-controls .mejs-time-rail .mejs-time-float {  
  11.     position: absolute;  
  12.     display: none;  
  13.     width: 33px;  
  14.     height: 23px;  
  15.     top: -26px;  
  16.     margin-left: -17px;  
  17.     background: url(../img/tooltip.png);  
  18. }  
  19.    
  20. .mejs-controls .mejs-time-rail .mejs-time-float-current {  
  21.     position: absolute;  
  22.     display: block;  
  23.     leftleft: 0;  
  24.     top: 4px;  
  25.    
  26.     font-family: Helvetica, Arial, sans-serif;  
  27.     font-size: 10px;  
  28.     font-weight: bold;  
  29.     color: #666666;  
  30.     text-align: center;  
  31. }  
  32.    
  33. .mejs-controls .mejs-time-rail .mejs-time-float-corner {   
  34. display: none; }  

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.
  1. .mejs-controls .mejs-time-rail .mejs-time-current,  
  2. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  
  3.     background: #82d344;  
  4.     background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);  
  5.     background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);  
  6.     background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);  
  7.     background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);  
  8.     background: linear-gradient(top, #82d344 0%, #51af34 100%);  
  9. }  

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.
PreviewDownload

{ 2 comments... read them below or Comment }

  1. jQuery designer out of Belgium27 August 2012 at 14:39

    Awesome tutorial, this was exactly what i was looking for. very informative and through and through accurate! Thanks for this great post!

    ReplyDelete
  2. Dave27 August 2012 at 14:40

    Looks great. One improvement would be to either have the progress bar fade from view when the video is playing and the mouse isn’t active, or move it below the video so it’s not obscuring the bottom strip of the video.

    ReplyDelete

- Copyright © Bjonk Design -