1stwebdesigner

Create a Custom HTML5 Audio and Video Element UI with MediaElement.js

Posted: 01 Dec 2014 06:00 AM PST

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

audio

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.

  <!DOCTYPE html>  <html lang="en-US">  <head>      <meta charset="utf-8">      <title>Creating a Custom HTML5 Audio and Video Element UI with      MediaElement.js</title>      <link href="css/normalize.css" rel="stylesheet" type="text/css">      <link href="css/style.css" rel="stylesheet" type="text/css">      <link href="css/audio.css" rel="stylesheet" type="text/css">      <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>      <script src="js/mediaelement-and-player.min.js" type="text/javascript"></script>  </head>

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.

    	<div class="audio-player">          <p>Michael Buble - Everything</p>      	<audio id="audio-player" src="restheces/Michael Buble - Everything.mp3" type="audio/mp3" controls="controls"></audio>    	</div>

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.

  $(document).ready(function() {      	$('#audio-player').mediaelementplayer({          	alwaysShowControls: true,          	features: ['playpause','volume','progress'],          	audioVolume: 'horizontal',          	audioWidth: 364,     	     audioHeight: 70      	});  	});

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.

  .audio-player,.audio-player div,.audio-player p,.audio-player a,.audio-player button {  	margin: 0;  	padding: 0;  	border: none;  	outline: none;  }

Then, style the player container and add the width a height on it and style the paragraph tag for the title.

  .audio-player {  	position: relative;      margin: 0 auto;      background: #d14242;  	width: 426px;      height: 120px;  }    .audio-player p {      position: absolute;      text-align: center;      text-transform: uppercase;  	left: 143px;  	top: 62px;      font-family: 'Open Sans', sans-serif;      font-weight: 700;      font-size: 17px;  	color: #fcc;      font-weight: 700;  }

Next, style the play-pause button. This will be in a form of png sprite image and manipulated using the background-position.

    .mejs-controls .mejs-button button {      position: absolute;      display: block;  	width: 73px;      height: 71px;  	cursor: pointer;      background: #961717;  }    .mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {  	width: 115px;      height: 120px;      background: #961717 url(../img/playerbuttons.png) 0 0 no-repeat;  }    .mejs-controls .mejs-pause button {      background-position: 0 -120px;  }

For the Mute and Unmute Control button, use a png sprite image and manipulate the background-position to display each part.

  .mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {  	width: 24px;      height: 23px;      background: transparent url(../img/mute-unmute.png) 0 0;  	top: 28px;  	left: 140px;  }    .mejs-controls .mejs-unmute button {      background-position: 0 -23px;  }

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.

    .mejs-controls div.mejs-horizontal-volume-slider {      position: absolute;  	top: 33px;  	right: 23px;      cursor: pointer;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {  	width: 232px;      height: 8px;      background: #961717;  	-webkit-border-radius: 4px;      -moz-border-radius: 4px;      border-radius: 4px;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {      position: absolute;  	width: 0;      height: 8px;      background: #961717;  	top: 1px;  	left: 1px;      -webkit-border-radius: 8px;      -moz-border-radius: 8px;      border-radius: 8px;  }

The CSS codes below will set the background color and dimension of the time loaded and current time.

    .mejs-controls div.mejs-time-rail {  	width: 380px;  }    .mejs-controls .mejs-time-rail span {      position: absolute;      display: block;  	width: 380px;      height: 12px;  	top: 40px;  	left: 55px;      cursor: pointer;      -webkit-border-radius: 0 0 2px 2px;      -moz-border-radius: 0 0 2px 2px;      border-radius: 0 0 2px 2px;  }    .mejs-controls .mejs-time-rail .mejs-time-total {      background: #e26060;  	width: 311px !important;      height: 12px;      margin-top: 68px;      margin-left: 60px;  }    .mejs-controls .mejs-time-rail .mejs-time-loaded {  	top: 0;  	left: 0;  	width: 0;      background: #961717;  }    .mejs-controls .mejs-time-rail .mejs-time-current {  	top: 0;  	left: 0;  	width: 0;      background: #961717;  }

Next, add some styles for the time and volume sliders (handle).

    .mejs-controls .mejs-time-rail .mejs-time-handle {      position: absolute;      display: block;  	width: 10px;      height: 10px;  	top: 2px;      background: #330202;      -webkit-border-radius: 50%;      -moz-border-radius: 50%;      border-radius: 50%;  	left: 11px;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {      position: absolute;      display: block;  	width: 12px;      height: 12px;      -webkit-border-radius: 50%;  	top: -2px;      background: #330202;  }

Finally, add the styles for the Time Progress Bar tooltip. This will appear when you hover over the progress bar.

    .mejs-controls .mejs-time-rail .mejs-time-float {      position: absolute;      z-index: 9999;  	color: fff;  	width: 33px;      height: 23px;  	top: -26px;      display: none;      margin-left: -17px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-current {  	width: 33px;      display: block;  	left: 0;  	top: 4px;      font-family: 'Open Sans', sans-serif;      font-size: 10px;      font-weight: 700;  	color: #f89494;      text-align: center;      z-index: 9999;      background: #bf3737;      padding: 2px 2px 5px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-current:after {      content: "";      position: absolute;  	width: 0;      height: 0;      border-width: 10px;      border-style: solid;      border-color: #bf3737 transparent transparent;  	top: 15px;  	left: 8px;  }

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

video

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.

  <!DOCTYPE html>  <html lang="en-US">  <head>      <meta charset="utf-8">      <title>Creating a Custom HTML5 Audio and Video Element UI with      MediaElement.js</title>      <link href="css/normalize.css" rel="stylesheet" type="text/css">      <link href="css/style.css" rel="stylesheet" type="text/css">      <link href="css/video.css" rel="stylesheet" type="text/css">      <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>      <script src="js/mediaelement-and-player.min.js" type="text/javascript"></script>  </head>

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.

    <div class="video-player">    <video width="490" height="276" poster="img/video-poster.jpg">    <video src="resources/Pedestrian.mp4" type="video/mp4">    </video>   </div>

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.

    $(document).ready(function() {      $('video').mediaelementplayer({          alwaysShowControls: false,          videoVolume: 'horizontal',          features: ['playpause', 'progress', 'volume', 'fullscreen']      });  });

Step 5 – The CSS

For the CSS, start by adding reset and basic styles to the elements.

  .mejs-inner,.mejs-inner div,.mejs-inner a,.mejs-inner span,.mejs-inner button {  	margin: 0;  	padding: 0;  	border: none;  	outline: none;  }    /* General Styles */  .mejs-container {  	position: relative;  	background: #000;  }    .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;  	overflow: hidden;  	z-index: 1000;  	left: 0;  	top: 0;  	right: 0;  	bottom: 0;  }    .mejs-poster img {  	display: block;  }    .mejs-background,.mejs-mediaelement,.mejs-poster,.mejs-overlay {  	position: absolute;  	top: 0;  	left: 0;  }    .mejs-overlay-play {  	cursor: pointer;  }    .mejs-inner .mejs-overlay-button {  	position: absolute;  	top: 50%;  	left: 50%;  	margin-left: -82px;  	width: 158px;  	height: 158px;  	background: url(../img/playbutton.png) no-repeat;  }

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.

  .mejs-container .mejs-controls {  	left: 0;  	bottom: 0;  	background: #c94745;  	position: absolute;  	width: 100%;  	height: 15px;  }    /* Controls Buttons */  .mejs-controls .mejs-button button {  	display: block;  	cursor: pointer;  	margin-top: -8px;  	margin-left: -6px;  	width: 6px;  	height: 9px;  	background: transparent url(../img/play_pause.png);  }    /* Play & Pause Button */  .mejs-controls div.mejs-playpause-button {  	position: absolute;  	top: 12px;  	left: 15px;  }    .mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {      width: 6px;  	height: 9px;  	background-position: 0 0;  }    .mejs-controls .mejs-pause button {  	background-position: 0 -9px;  }

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.

    .mejs-controls div.mejs-volume-button {      position: absolute;  	top: 12px;  	left: 45px;  }    .mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {  	width: 11px;      height: 11px;      background: url(../img/mute_unmute.png)no-repeat;      background-position: 0 0;      margin-left: -14px;      margin-top: -9px;  }    .mejs-controls .mejs-unmute button {      background-position: 0 -12px;  }

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.

  .mejs-controls div.mejs-fullscreen-button {  	position: absolute;  	top: 7px;  	right: 7px;  }    .mejs-controls .mejs-fullscreen-button button,.mejs-controls .mejs-unfullscreen button {  	width: 10px;  	height: 10px;  	margin-top: -4px;  	cursor: pointer;  	background: url(../img/window_screen.png)no-repeat;  }    .mejs-controls .mejs-unfullscreen button {  	background-position: 0 -12px;  }

Self-explanatory, instead of setting up a pure background width element, you will set it up on an absolute positioning.

    .mejs-controls div.mejs-horizontal-volume-slider {  	position: absolute;  	cursor: pointer;  	top: 6px;  	left: 47px;  }    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {  	width: 60px;  	background: #330202;  }    .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;  }

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.

    .mejs-controls div.mejs-time-rail {  	position: absolute;  	top: -10px;  	height: 9px;  	width: 100%;  	left: 0;  }    .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: #ef3a3a;  }    .mejs-controls .mejs-time-rail .mejs-time-loaded {  	background: #630909;  }    .mejs-controls .mejs-time-rail .mejs-time-current {  	width: 0;  }

For the progress bar handle, you will simply create a small circle using the border-radius property with a background color of #ef3a3a.

    .mejs-controls .mejs-time-rail .mejs-time-handle {  	position: absolute;  	cursor: pointer;  	width: 10px;  	height: 10px;  	top: 0;  	-webkit-border-radius: 50%;  	-moz-border-radius: 50%;  	border-radius: 50%;  	background: #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.

    .mejs-controls .mejs-time-rail .mejs-time-float {  	position: absolute;  	display: none;  	width: 33px;  	height: 23px;  	top: -26px;  	margin-left: -17px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-current {  	width: 33px;  	display: block;  	left: 4px;  	top: 4px;  	font-family: 'Open Sans', sans-serif;  	font-size: 10px;  	font-youight: 700;  	color: #f89494;  	text-align: center;  	z-index: 9999;  	background: #bf3737;  	padding: 2px 2px 5px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-current:after {  	content: "";  	position: absolute;  	width: 0;  	height: 0;  	border-width: 10px;  	border-style: solid;  	border-color: #bf3737 transparent transparent;  	top: 13px;  	left: 8px;  }    .mejs-controls .mejs-time-rail .mejs-time-float-corner {  	display: none;  }

Finally, you will set up the background color of the Progress and Volume Bar.

  .mejs-controls .mejs-time-rail .mejs-time-current,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {  	background: #7c0f0f;  }

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.

Web Design Academy

Monday, December 1, 2014

1stwebdesigner

1stwebdesigner

Resources You Need to Complete This Tutorial

Custom Audio Player

Step 1 – Download jQuery library and MediaElement.js

Step 2 – Adding Necessary Links on the Head Section

Step 3 – The Markup

Step 4 – The Script

Step 5 – The CSS

Custom Video Player

Step 1 – Download jQuery library and MediaElement.js

Step 2 – Adding Necessary Links on the Head Section

Step 3 – The Markup

Step 4 – The Script

Step 5 – The CSS

Wrapping Up

No comments:

Post a Comment