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:

  • 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


<head>
	<title>Video Player</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="js/mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="css/style.css" media="screen">
</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.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

<video width="640" height="267" poster="media/cars.png">
	<source src="media/cars.mp4" type="video/mp4">
</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.

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
	$('video').mediaelementplayer({
		alwaysShowControls: true,
		videoVolume: 'horizontal',
		features: ['playpause','progress','volume','fullscreen']
	});
});
// ]]></script>

Step 3 – Video Basic Styles

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

.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

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.

.mejs-container {
	position: relative;
	background: #000000;
}

.mejs-inner {
	position: relative;
	width: inherit;
	height: inherit;
}

.me-plugin { position: absolute; }

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video,
.mejs-embed,
.mejs-embed body,
.mejs-mediaelement {
	width: 100%;
	height: 100%;
}

.mejs-embed,
.mejs-embed body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.mejs-container-fullscreen {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 1000;
}

.mejs-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
	position: absolute;
	top: 0;
	left: 0;
}

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

.mejs-overlay-play { cursor: pointer; }

.mejs-inner .mejs-overlay-button {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	background: url(../img/play.png) no-repeat;
}

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.

.mejs-container .mejs-controls {
	position: absolute;
	width: 100%;
	height: 34px;
	left: 0;
	bottom: 0;
	background: rgb(0,0,0);
	background: rgba(0,0,0, .7);
}

.mejs-controls .mejs-button button {
	display: block;
	cursor: pointer;
	width: 16px;
	height: 16px;
	background: transparent url(../img/controls.png);
}

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.

.mejs-controls div.mejs-playpause-button {
	position: absolute;
	top: 12px;
	left: 15px;
}

.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
	width: 12px;
	height: 12px;
	background-position: 0 0;
}

.mejs-controls .mejs-pause button { background-position: 0 -12px; }

.mejs-controls div.mejs-volume-button {
	position: absolute;
	top: 12px;
	left: 45px;
}

.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
	width: 14px;
	height: 12px;
	background-position: -12px 0;
}

.mejs-controls .mejs-unmute button { background-position: -12px -12px; }

.mejs-controls div.mejs-fullscreen-button {
	position: absolute;
	top: 7px;
	right: 7px;
}

.mejs-controls .mejs-fullscreen-button button,
.mejs-controls .mejs-unfullscreen button {
	width: 27px;
	height: 22px;
	background-position: -26px 0;
}

.mejs-controls .mejs-unfullscreen button { 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.

.mejs-controls div.mejs-horizontal-volume-slider {
	position: absolute;
	cursor: pointer;
	top: 15px;
	left: 65px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	width: 60px;
	background: #d6d6d6;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	position: absolute;
	width: 0;
	top: 0;
	left: 0;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	height: 4px;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

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.

.mejs-controls div.mejs-time-rail {
	position: absolute;
	width: 100%;
	left: 0;
	top: -10px;
}

.mejs-controls .mejs-time-rail span {
	position: absolute;
	display: block;
	cursor: pointer;
	width: 100%;
	height: 10px;
	top: 0;
	left: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
	background: rgb(152,152,152);
	background: rgba(152,152,152, .5);
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: rgb(0,0,0);
	background: rgba(0,0,0, .3);
}

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

.mejs-controls .mejs-time-rail .mejs-time-handle {
	position: absolute;
	cursor: pointer;
	width: 16px;
	height: 18px;
	top: -3px;
	background: url(../img/handle.png);
}

.mejs-controls .mejs-time-rail .mejs-time-float {
	position: absolute;
	display: none;
	width: 33px;
	height: 23px;
	top: -26px;
	margin-left: -17px;
	background: url(../img/tooltip.png);
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
	position: absolute;
	display: block;
	left: 0;
	top: 4px;

	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
	text-align: center;
}

.mejs-controls .mejs-time-rail .mejs-time-float-corner { 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.

.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	background: #82d344;
	background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);
	background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
	background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);
	background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);
	background: linear-gradient(top, #82d344 0%, #51af34 100%);
}

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.

Preview

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Impressionist UI - User Interface Pack

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Newsletter

56 Comments
  1. Dave May 8, 4:13 pm

    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.

    Reply
    -3
    • Valeriu May 8, 4:24 pm

      To hide the controls when the mouse isn’t active change the setting alwaysShowControls to false.

      Reply
      0
  2. Brad May 8, 9:06 pm

    Is it possible to create video playlists with this video player?

    Reply
    -4
  3. Mohammed Uddin May 9, 3:01 am

    There is a problem with your coding. Look at the demo I have downloaded and tried to fix the issue but found no luck. The handle bar the silver aluminum circle it overlaps the video. take a look at youtube the circle with the red dot inside never ever overlaps or goes outside the video box. In your case before the video begins the circle already is outside not only that but when the video is finished the circle goes outside as well. Please fix this issue as I have been trying to get a good html5 video player your’s is the best free tutorial. I appreiciate the work you put into this but please try to fix the issue as everything is going so smooth I’m trying to implement this on my website having but the circle going outside the video during pre-start and finish really takes the look away from the video.

    Reply
    -2
    • Valeriu May 9, 3:47 am

      I’ve tried to hide it but as I know it’s not possible. If I add a overflow hidden the player just don’t work properly. Maybe on the future MediaElement.js versions this would be fixed. You can remove the handle if you don’t like.

      Reply
      -1
  4. Ran May 9, 9:44 am

    This looks great! But I thought the file “flashmediaelement.swf” seems useless. When I delete it, the project works well. Another question is about the lisence: can I use it in my project freely?or how could I get the lisence?

    Reply
    0
    • Adrian May 9, 10:02 am

      yes you can use them for free, check the readme file for information.

      Reply
      0
      • Ran May 9, 10:22 am

        I’ve got it, thank you! And the swf and xap type files are really useless in this demo. So you could delete it now!

        Reply
        0
        • Valeriu May 9, 9:33 pm

          If you delete theme it will not work on older browsers that don’t support HTML5.

          Reply
          +2
  5. paul May 9, 11:26 pm

    thanks, very interesting.
    i was following along testing the module in Drupal.
    i have yet to figure out where i would leave the ‘ $(‘video’).mediaelementplayer({…. ‘
    in that case.

    Reply
    -1
  6. ugh May 9, 11:53 pm

    I’m tired of blogs that only talk about the players design. Yadda-Yadda….

    Yet NO SITE has even attempted to make a video player WITH EMBED OPTIONS!!!

    Like you and no other blogger thinks, that maybe just maybe someone would want a video player that I can embed other places, and so can my viewers.

    Jeez please try to impress the people that look for REAL hardcore information, not this fluffy kindergarten stuff.

    Reply
    -2
    • Adrian May 10, 12:05 am

      thanks for your opinion… i hate trolling ;)

      Reply
      -2
      • ugh May 10, 12:24 am

        Tolling??

        Ok.. Please tell me, where and how to create this video player with a embed option?

        Reply
        -1
        • ugh May 10, 12:32 am

          By the way I’ll be refreshing this page all day to see and wait for your answer.

          …waiting

          Reply
          -1
          • Valeriu May 10, 12:36 am

            OMG, want embed videos, go to youtube ;)
            You don’t see this kind of tutorials because is not what 99.9% of users are looking for. To have a embed service you need to have a very powerful server, etc.

            -1
        • Adrian May 10, 12:35 am

          It’s your problem no? we do not plan to make an video player with embed option. is for free so you can decide to use them or no. if you don’t like them just looking other player :)

          you leave a very negative comment about the function of player that we do not make, try to propose with other words without critiques…

          Reply
          -3
          • ugh May 10, 12:43 am

            Hidden due to low comment rating. Click here to see.

            -6
          • Adrian May 10, 12:48 am

            Give us an example how to make a cool video player :) teach us how to make tutorial and we will share them :)

            0
          • ugh May 10, 12:53 am

            I’m the student asking the teachers for advice, so how does that work?

            Anyway I’ll find the answers somehow and come back with a tutorial, so we can solve this dilemma.

            -2
          • Adrian May 10, 12:57 am

            Good, interesting to see your solution.

            0
  7. Mohammed Uddin May 10, 6:38 am

    Actually i have your solution to make embed option heres what you do make a bank folder on the root level of your website name it embed then create a blank html page. In that html page you want nothing but the video you want to let people embed. But their is a catch when you put the video on this blank page make sure that the video player is roughly 1920 x 1080 in size. Now you got your video set dothis link your blank page to your stylesheets and scripts to make the video work and look good. Then test it out like this yoursite.com/embed/blank.html you should see nothing but a functioning video player. The last and final step to let people embed your video is like this <iframe src=”yoursite.com/embed/blank.html” height=640px” width=”360px”></iframe> thats all folks thats exactly what youtube does. Please visit my website. Hope i helped

    Reply
    0
    • ugh May 10, 12:59 pm

      I can’t tell you how helpful your answer was, I immediately knew what you were talking about. As for the video player I choose to go with actionscript 3. Though all day I kept scratching my head wondering how to get the embed options to work, when the answer was so simple :P

      Mohammed whereever you are…. thanks!!!!

      Reply
      +3
      • Mohammed Uddin May 10, 9:11 pm

        Im glad i could help. and i am in new york lol. however i think you should stick with mediaelementjs its a great video player im working on a skin for it now to make it look exactly like youtube.

        Reply
        -1
  8. Harry Yamada May 14, 9:49 am

    I try to change the another mp4 video, the size is 720×400. i also change on index.html but the video can’t run. Have any wrong in index or js? Thanks.

    Reply
    -1
    • Valeriu May 14, 12:09 pm

      Make sure it has the right codec H264 for video and ACC for Audio.

      Reply
      -2
      • Harry Yamada May 15, 7:23 am

        Thanks, I converted to H264 then ok aldy. Is it any issue for IE? loading the page so slow.

        Reply
        0
  9. patricia May 19, 12:44 pm

    hey dear first i just love your tutorial and i found it to be very helpful. I do have a question though that if you dont have time to answer in details, I would like to please give me some sort of direction where i can find a book or a source for recommendation!

    I love your video player and would like to create a playlist where I can play videos from my own server and from you tube. please can you tell me where can I find material that will teach me how to do it? a website that will teach? or if you, or someone know how to do it, can you please say something about this?

    thanks and thanks and thanks!
    patricia.

    Reply
    0
    • Valeriu May 19, 3:28 pm

      Sorry I don’t find a tutorial. But to implement playlist functionality, you would have to listen for the “ended” event and then switch the source of the video to the next video.

      Reply
      0
  10. licryak May 27, 5:02 am

    great help. thanks for posting this tutorial. it has taken more time for me to figure correct coding to apply the player and make adjustments. I have a problem… loading the scroll bar, sometime it loads on top of the player and sometimes, but rarely, loads in the proper location. How can I fix this? here it is>> avidhustle.com/freshstart/build/freshstart.html

    Reply
    0
    • Valeriu May 27, 2:32 pm

      It loads on the right place for me.

      Reply
      0
      • licryak May 27, 9:56 pm

        for me on a Kindle Fire and Mac OS Safari browser it loads on top sometimes. I started over. It seems I have a few bugs in my OS that I bought (* for free.) Thanks. keep up the good work!

        Reply
        0
  11. Michael Horne Jun 28, 11:37 am

    The Preview doesn’t work for me in CHrome. I have audio but no video.

    Reply
    0
  12. abola Jun 29, 4:46 pm

    if IE is open and run it in Chrome, my Chrome comes down to my taskbar!!!!!
    It has a problem with Chrome

    Reply
    0
  13. felix Jul 3, 5:20 pm

    Hi, I don’t know why I can run flash fallback in demo page of this website for IE7 and IE8 but after I

    download the package, I cannot run the flash video on IE7 and IE8 although I’m not delete any of your file in

    the package. Do I need to add any code in server side such as htaccess file or anything else? Thank you

    very much in advance!

    Reply
    0
  14. Red Aug 7, 3:21 am

    It worked very well on the internet. However, I’ve viewed on iphone safari, a video automatically play as default video, where green bar is not visible. Is this supposed to be this way? Please advise?

    Reply
    0
  15. Cristian Iacobanu Aug 23, 12:09 am

    Don’t forget:

    Awesome player, guys! Thanks!

    Reply
    0
    • Cristian Iacobanu Aug 23, 12:11 am

      Hmm… it seems it stripped the html code. I wanted to say: Don’t forget to add the .ogv file.

      Reply
      0
  16. L-Train Sep 14, 7:20 pm

    Have you used Adobe Edge? How would I go about implementing this player inside of Adobe Edge?

    Reply
    0
  17. Ricardo Capistran Oct 8, 10:25 am

    Hi, is it posible to add subtitles to the video?

    Reply
    0
  18. joachim gerber Oct 18, 1:37 am

    the player doesnt work in firefox! why?

    Reply
    0
  19. Killer Oct 24, 4:17 am

    The player controls in IE7 are upside down and at the top of the screen. Is there a fix for this?
    Thanks!

    Reply
    0
  20. vadivukarasi Oct 30, 10:15 am

    The mp4 video is not playing in google chrome.Im using mp4 alone.

    Reply
    0
  21. wjohnson Nov 2, 8:10 pm

    Hi im having issues with dynamically changing source on a cllick function..Ive tried js and jquery so far no luck. any sample code????

    Reply
    0
  22. mreshane Nov 24, 9:45 pm

    Hi there, i was trying quite a sometimes for the video/audio in html5 – im looking at your project here and it’s neat, i would like to add it to my site but i have some problem with it.

    1. i have domain name but the problem is…
    2. im in the blogger section, which is my server are managed by the googlehosted..
    3. is there any script that i can embed it on my blog?
    4. for that person name ugh [what a lamer, he usually can find those answer everywhere but trying to convincing you guys a fake]..
    5. don’t worry guys ugh is just a lamer, hahaha.. what stupid little one hahahha.. just embed the script code and that’s it, if people here don’t know how to do that you should do something about it! lol…
    6. anyway hope you guys could help me out.. :D

    Thanx a bunch for reading my comments.

    LOL!

    P/S: UGH! Hahahha.. What a lamer!

    Reply
    0
  23. Sudhir Jan 9, 10:21 am

    Hi there, when I open UR online tutorial in my ie8 browser it works properly but the source code u shared here I downloaded and tried it to open in my same browser it never shows any video there. Can u give me any idea what is the reason behind this problem and how to solve it.

    Reply
    0
  24. John Jan 24, 5:59 am

    Awesome tut! Now I do have a question… I testing this with a video that has transparent background. But, even though I change the script it keeps showing a default solid black. Any tips?

    Reply
    0
  25. Vibol Jun 17, 11:12 am

    I want to show the video duration on the player how can i do this?

    Reply
    0
  26. Stefan Aug 31, 9:11 pm

    Nice video player. I would like to add subtitles but don’t know how to do the css coding like in the original Mediaelements.js plugin.

    Reply
    0
  27. Plamen Oct 2, 1:21 pm

    MediaElement.js is nice player but I have one maybe stupid problem. First I want to say that I’m newbie when we are talking about JavaScript. :-(
    My problem is very close connected to this player but at all it is more global and I don’t know how I can fix it. I have let’s be two video files with continues movie inside. First file start from time 00:00:00.00 and finished on 00:00:10.00. Second start from 00:00:10.01 and finished on 00:00:20.00. The files contain MP4 encoded data. First file can be played easy with MediaElement.js on all browsers in Windows environment. Under all I talk for Firefox, Chrome, Safari and IExplorer. I think that they are enough for initial test. the problem is with second file. It can be played without problems under Firefox and IExplorer but I have a problem with Safari and Chrome. When I try this with Safari then the player report duration 20 seconds and play first 10 second black screen and after that start playing real content. With Chrome the problem is more deep. Then this file didn’t played at all. There duration is right, the player show only one frame and do nothing after that. Play button didn’t react.
    I try to repositioning current time with setCurrentTime function from player but without success. My code is very simple but in common case execution stop after third line:
    1. document.getElementById(currentPlayer).setSrc(video_src);
    2. document.getElementById(currentPlayer).play();
    3. document.getElementById(currentPlayer).setCurrentTime(10.0);

    I am sure that the problem is in my code but I can’t understand where. :-(

    Reply
    0
  28. kamlesh Oct 24, 3:07 pm

    The player have a big thing missing in it that is its video buffering how it can be seen that the video is buffering or no

    If some one knows it please let me know

    Reply
    0
  29. Old Duffer Jan 26, 7:33 pm

    Nice tutorial thanks for taking the time to write. I have a question? I see it has been posted before but no reply so if I may can I ask again, is it possible to add a duration to the control bar?. I have viewed the css file that is supplied in the download but cant find any reference to it. I have also downloaded the original source files from media elements viewed the css and can see the reference to it. I have tried to use this but it breaks the source code used in the tutorial… Maybe a update by yourselfs if possible would fix this I only ask as you can see by my name really am a oldduffer who doesnt know if it is new year or new york lol so any help with this I would be grateful. Again thanks forthe tutorial.

    Reply
    0
  30. dimas Jun 25, 10:16 am

    how to set resolution to HD or 360 p, 240 p and etc?

    Reply
    0
  31. Jefferson Jul 2, 3:45 pm

    how to put logo on this player

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters