How to Create A Web-based Video Player

Preparation

As usual, before we get busy with the code, we need to prepare some stuff first, especially the video. In this tutorial, we are going to use this video from TED Talk by Kelli Anderson in Youtube. To download it, you can use this web tool, called KeepVid.com.
For wider browser compatibility, we need to provide two formats of video, MP4 and OGV. By default, when you download videos from Youtube with KeepVid.com you most likely will get the MP4 format. You can use Miro Video Converter to convert MP4 video to OGV format, it’s available for FREE for both Windows and OS X machine.
Furthermore, we also need an image file for video cover. To create this cover you can play the video with VLC and then go Video > Snapshot to take a snapshot of the video. Regarding the user interface icon, we are going to use FontAwesome. Lastly, we also need jPlayer, jQuery to run the video, as well as a new CSS file to store the video skin styles.
After collecting all this, put them in their appropriate folders, as shown below:

HTML Structure

Now, create a new HTML document and link the jQuery, jPlayer libraries as well as the CSS file in the <head> section, like so.

view plain copy to clipboard print ?

<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>

Regarding the HTML structure for our video player, it’s actually similar to the how to create an Audio Player from the previous tutorial.
Only, this time we have a button to turn the video into fullscreen format and a play button at the center of the video. Place this code below inside the <body> section.

view plain copy to clipboard print ?

<div id="jp_container_1" class="jp-video">
    <div class="jp-title">
      <h1>Kelli Anderson - Disruptive Wonder for a Change</h1>
    </div>
    <div class="jp-type-single">
      <div id="jquery_jplayer_1" class="jp-jplayer"></div>
      <div class="jp-gui">
        <div class="jp-video-play">
          <a href="javascript:;" class="jp-video-play-icon" tabindex="1"></a>
        </div>
        <div class="jp-interface">
          <div class="jp-controls-holder">
            <ul class="jp-controls">
              <li><a href="javascript:;" class="jp-play" tabindex="1"></a></li>
              <li><a href="javascript:;" class="jp-pause" tabindex="1"></a></li>
              <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute"></a></li>
              <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"></a></li>
            </ul>
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
            <ul class="jp-toggles">
              <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen"></a></li>
              <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen"></a></li>
          </div>
          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>
          <div class="jp-current-time"></div>
        </div>
      </div>
      <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
      </div>
    </div>
</div>

Activating the Video

Activating the video is also similar to our previous Audio Player. The only difference is, this time, we need to link the video poster and the supplied formats are now m4v and ogv. Put all these scripts right below the jquery and jplayer links we have added before.

view plain copy to clipboard print ?

<script>
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp4",
ogv: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogv",
poster: "vid/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.png"
});
},
swfPath: "/js",
supplied: "m4v,ogv"
});
});
</script>

At this stage, our video player still looks plain as shown in the following screenshot.

Adding Styles

After adding those script, you should now be able to run the video. But, the player still looks unpresentable, so let’s make it nicer by adding styles.
Open up the style.css file that we have created earlier in this post.
We will start off by adding the @font-face rule and remove the underlines from all the links.

view plain copy to clipboard print ?

@font-face {
  font-family: "FontAwesome";
  src: url('fonts/fontawesome-webfont.eot');
  src: url('fonts/fontawesome-webfont.eot?#iefix') format('eot'),
       url('fonts/fontawesome-webfont.woff') format('woff'),
       url('fonts/fontawesome-webfont.ttf') format('truetype'),
       url('fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}
a {
    text-decoration: none;
}

Video Width

Then, we specify the width of the video container and place it at the center of the browser window, like so.

view plain copy to clipboard print ?

.jp-video {
    margin: 0 auto;
    position: relative;
    font-family: Arial, sans-serif;
}
.jp-video-270p {
    width: 480px;
}

Video Title

We turn the color of the title to dark grey, specify the font-size and align it to the center.

.jp-title h1 {
 font-size: 1em;
 text-align: center;
 color: #555;
}

Play Button

Then, we style the play button. We place this button at the top over the video and to display the Play icon, we assign FontAwesome font family to it.

view plain copy to clipboard print ?

.jp-video-play {
    font-family: "FontAwesome";
    position: absolute;
    top: 45%;
    left: 46%;
}
.jp-video-play a {
    font-size: 2em;
    color: rgba(255,255,255,.7);
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 55px;
    text-align: center;
    background-color: rgba(0,0,0,.8);
    border-radius: 5px;
}

Video User Interface

The User Interface for our video player will look similar. It will have a gradient with the orange color scheme while the icons to control the video, like the Play, Pause and Volume will be in white.

view plain copy to clipboard print ?

.jp-interface {
    width:100%;
    bottombottom: 0;
    position: relative;
    background: #f34927;
    background: -moz-linear-gradient(top,  #f34927 0%, #dd3311 100%);
    background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));
    background: -webkit-linear-gradient(top,  #f34927 0%,#dd3311 100%);
    background: -o-linear-gradient(top,  #f34927 0%,#dd3311 100%);
    background: -ms-linear-gradient(top,  #f34927 0%,#dd3311 100%);
    background: linear-gradient(to bottombottom,  #f34927 0%,#dd3311 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );
    overflow: hidden;
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.jp-interface a {
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.jp-controls, .jp-toggles {
    padding: 0;
    margin: 0;
    font-family: "FontAwesome"
}
.jp-toggles {
    position: absolute;
    top: 14px;
    rightright: 14px;
}
.jp-controls li, .jp-toggles li {
    display: inline;
}
.jp-play,.jp-pause {
    width: 55px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 43px;
}
.jp-mute,.jp-unmute {
    position: absolute;
    rightright: 85px;
    top: 0;
    width: 20px;
    height: 40px;
    display: inline-block;
    line-height: 43px;
}
.jp-progress {
    background-color: #992E18;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    position: absolute;
    left: 55px;
    top: 14px;
    width: 55%;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}
.jp-play-bar {
    height: 12px;
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
}
.jp-volume-bar {
    position: absolute;
    rightright: 40px;
    top: 16px;
    width: 45px;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    background-color: #992E18;
    overflow: hidden;
}
.jp-volume-bar-value {
    background-color: #fff;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
}
.jp-current-time {
    color: #FFF;
    font-size: 12px;
    line-height: 14px;
    position: absolute;
    rightright: 115px;
    top: 13px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

At this point, our video player start looking nice, as shown in the following screenshot.

Video Fullscreen

We are able to switch the video to fullscreen. For that reason, we also need to add styles to specifically target when the video is in fullscreen mode, including adjusting the width and the height of the Play button, the width of the progress bar and the video should be on top of others by specifying the z-index larger.

view plain copy to clipboard print ?

.jp-video-full {
    /* Rules for IE6 (full-screen) */
    width:480px;
    height:270px;
    /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
    position:static !important;
    position:relative;
}
/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
.jp-video-full div div {
    z-index:1000;
}
.jp-video-full .jp-jplayer {
    top: 0;
    left: 0;
    position: fixed !important;
    position: relative; /* Rules for IE6 (full-screen) */
    overflow: hidden;
}
.jp-video-full .jp-interface {
    position: absolute !important;
    position: relative; /* Rules for IE6 (full-screen) */
    bottombottom: 0;
    left: 0;
}
.jp-video-full .jp-gui {
    position: fixed !important;
    position: static; /* Rules for IE6 (full-screen) */
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    z-index:1001; /* 1 layer above the others. */
}

.jp-video-full .jp-video-play a {
    font-size: 3em;
    height: 80px;
    width: 80px;
    line-height: 95px;
}
.jp-video-full .jp-progress {
    width: 83%;
}

And this is how our video player looks like in fullscreen mode.

Add Shadow

This is only optional, but I would like to add shadow to make the video player look nicer and more prominent.

view plain copy to clipboard print ?

.jp-video-270p .jp-type-single {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

And, that’s all the codes we need, you are now able to see the video and download the file source from the following links.