This is a tutorial on building an HTML5 video player in Javascript. It’s meant to give you a basic understanding of the different options you have with the new video tag in HTML5, and the javascript needed to create some of the typical video controls you’d find in other players. It’s library agnostic, meaning you don’t need a library like jQuery to create it, however once you understand how everything works it can definitely be simplified/improved on. I’m always open for feedback if you have suggestions.

View the final result.

Setup

Download these movies for testing.
trailer_test.mp4
trailer_test.ogg
(c) copyright Blender Foundation | www.bigbuckbunny.org

To speed things along, copy the source of the following link.

start.html

…and create a file in the same folder as the downloaded movies. The page has the html for the video tag, controls, and some basic javascript variables set up. Hopefully it’s straight forward enough without going into too much more detail. Afterwards you can easily restyle everything to make it look however you want.

HTML5 Video Tag

The <video> tag is basically a new tag introduced in HTML5 that allows you to embed video in a web page without having to use Flash or another embeddable plugin, and instead use a player that’s built into the browser. It’s only supported by advanced browsers like Firefox, Safari, Chrome, and Opera. Not Internet Explorer, though IE9 is supposed to support it. For your video to work in all the advanced browsers, it has to be converted into at least 2 formats: h.264 (Safari and Chrome) and Ogg (Firefox and Opera). VP8, a new codec from On2/Google, may eventually remove the need for multiple versions, but that could take some time.

I’ve already set up the video tag in the example code, and I’m not going to go into the specific attributes of the video tag beyond what’s needed for this tutorial, but if you’re looking for some good resources on using the video tag specifically, start with Kroc Camen’s Video for Everybody.

Ok, getting on to it.

Controller Setup

The controller html has already been created, but it needs to be positioned and revealed. The showController method is simple, but can be expanded on if you want to add effects.

function showController(){
  controls.style.display = "block";
}

The positionController function moves the controller to the bottom left of the video and makes it as wide as the video.

function positionController(){
  controls.style.top = (video.offsetHeight - controls.offsetHeight) + "px";
  controls.style.left = "0px";
  controls.style.width = video.offsetWidth + "px";
  sizeProgressBar();
}

We also want to resize the progress section so the controls fill the width of the video. The numbers being subtracted from the widths are specific to the example design, and will change if you create your own.

function sizeProgressBar(){
  progressControl.style.width = (controls.offsetWidth - 125) + "px";
  progressHolder.style.width = (progressControl.offsetWidth - 80) + "px";
}

Once these functions are created we need to add them to the bodyLoaded function. The show function has to come first for the positioning to work.

var bodyLoaded = function(){
  ...
  showController();
  positionController();
}

Play/Pause

To play and pause the video, we can use the play() and pause() methods of the video element. Create functions that will call these methods.

function playVideo(){
  video.play();
  playControl.className = "pause control";
}

function pauseVideo(){
  video.pause();
  playControl.className = "play control";
}

I’ve also added lines that update the class of the play button to switch it between the play and pause icons.

Next we have to add an event listener for the play button to handle when a user clicks it. We need to add it to bodyLoaded method so it waits for the play button to be available. We’ll use the ‘paused’ attribute to decide which method to call.

playControl.addEventListener("click", function(){
  if (video.paused) {
    playVideo();
  } else {
    pauseVideo();
  }
}, true);

Play Progress

Next we’ll want to show the progress of the video as it plays. To do this we’ll need to set an interval that continually updates the progress bar width. We only want the interval to run when the video is playing however, so we’ll also create a function that stops the interval, that will be called whenever the video is paused.

function trackPlayProgress(){
  playProgressInterval = setInterval(updatePlayProgress, 33);
}

function stopTrackingPlayProgress(){
  clearInterval(playProgressInterval);
}

The updatePlayProgress function uses the video’s current time to total time (duration) ratio, to resize the progress bar based on the progress bar holder’s width. The “- 2″ is to account for the border on the progressHolder.

function updatePlayProgress(){
  playProgressBar.style.width = ((video.currentTime / video.duration) * (progressHolder.offsetWidth - 2)) + "px";
}

Now that we have these functions in place, we need to add them to the play and pause functions to trigger them.

function playVideo(){
  ...
  trackPlayProgress();
}

function pauseVideo(){
  ...
  stopTrackingPlayProgress();
}

We’ll also add the updatePlayProgress method to the sizeProgressBar method, so whenever the progress bar is resized, the current progress is updated as well.

function sizeProgressBar(){
  ...
  updatePlayProgress();
}

Time Display

Next we’ll want to update the time display (to the right of the progress bar) to show the exact time through the video. I’m using the formatTime method to convert seconds into a MM:SS format.

function updateTimeDisplay(){
  currentTimeDisplay.innerHTML = formatTime(video.currentTime);
  if (video.duration) durationDisplay.innerHTML = formatTime(video.duration);
}

function formatTime(seconds) {
  seconds = Math.round(seconds);
  minutes = Math.floor(seconds / 60);
  minutes = (minutes >= 10) ? minutes : "0" + minutes;
  seconds = Math.floor(seconds % 60);
  seconds = (seconds >= 10) ? seconds : "0" + seconds;
  return minutes + ":" + seconds;
}

After we have these functions, we need to add them to updateTimeDisplay to the updatePlayProgress method, so it’s called at the same time.

function updatePlayProgress(){
  ...
  updateTimeDisplay();
}

Progress Bar Scrubbing

Now that we’re showing the progress through the video, we want to make it so you can click and drag on the progress bar to move around in the video’s timeline. For this we’ll need a few new functions.

The setPlayProgress uses a click X value to tell where on the bar the user clicked or dragged. The Math.max and Math.min functions are used to make sure the video time is never set to a point outside of 0-100% of the duration.

function setPlayProgress(clickX) {
  var newPercent = Math.max(0, Math.min(1, (clickX - findPosX(progressHolder)) / progressHolder.offsetWidth));
  video.currentTime = newPercent * video.duration
  playProgressBar.style.width = newPercent * (progressHolder.offsetWidth - 2)  + "px";
  updateTimeDisplay();
}

The blockTextSelection and unblockTextSelection methods are used so when the user is dragging the mouse, it’s not selecting the elements under it.

function blockTextSelection(){
  document.body.focus();
  document.onselectstart = function () { return false; };
}

function unblockTextSelection(){
  document.onselectstart = function () { return true; };
}

The findPosX function is used to determine an object’s x value in relation to the edge of the page. This is required to compare the user’s click to the location of the progress bar.

function findPosX(obj) {
  var curleft = obj.offsetLeft;
  while(obj = obj.offsetParent) {
    curleft += obj.offsetLeft;
  }
  return curleft;
}

Now that we have these functions, we need to add a couple of event listeners (in the bodyLoaded function) to handle when a user clicks and drags on the progress bar. We’ll use the videoWasPlaying variable to keep track of the status of the video, so we can pause the video while the user is scrubbing, and start it again when they stop if it was playing before.

progressHolder.addEventListener("mousedown", function(){
  stopTrackingPlayProgress();

  if (video.paused) {
    videoWasPlaying = false;
  } else {
    videoWasPlaying = true;
    video.pause();
  }

  blockTextSelection();
  document.onmousemove = function(e) {
    setPlayProgress(e.pageX);
  }

  document.onmouseup = function() {
    unblockTextSelection();
    document.onmousemove = null;
    document.onmouseup = null;
    if (videoWasPlaying) {
      video.play();
      trackPlayProgress();
    }
  }
}, true);

progressHolder.addEventListener("mouseup", function(e){
  setPlayProgress(e.pageX);
}, true);

Volume Control

For the volume, we’ll create a function to set the volume and a function to update the volume display. The setVolume function is similar to the setPlayProgress function. It uses the mouse’s x position over the volume control to calculate the new volume. In this case, instead of using the Math.max and Math.min function to limit the volume number, I’m using a simple if/else.

function setVolume(clickX) {
  var newVol = (clickX - findPosX(volumeControl)) / volumeControl.offsetWidth;
  if (newVol > 1) {
    newVol = 1;
  } else if (newVol < 0) {
    newVol = 0;
  }
  video.volume = newVol;
  updateVolumeDisplay();
}

The volume display used here is specific to this example. It uses bottom borders on <li>s to create the look of bars. The function is used to updated the color of each bar.

function updateVolumeDisplay(){
  var volNum = Math.floor(video.volume * 6);
  for(var i=0; i<6; i++) {
    if (i < volNum) {
      volumeDisplay.children[i].style.borderColor = "#fff";
    } else {
      volumeDisplay.children[i].style.borderColor = "#555";
    }
  }
}

Now that we have these, we need to add event listeners to bodyLoaded to handle when a user clicks and drags on the volume control.

volumeControl.addEventListener("mousedown", function(){
  blockTextSelection();
  document.onmousemove = function(e) {
    setVolume(e.pageX);
  }
  document.onmouseup = function() {
    unblockTextSelection();
    document.onmousemove = null;
    document.onmouseup = null;
  }
}, true);

volumeControl.addEventListener("mouseup", function(e){
  setVolume(e.pageX);
}, true);

We’ll also call updateVolumeDisplay directly so the volume display is updated when the page is loaded.

updateVolumeDisplay();

Full Screen (or Full Window) mode

Browsers don’t yet have the capability for us to expand the video to the full screen like you can in Flash video. The best we can get is expanding it to the size of the browser window. You could also potentially resize the window to be larger, but this doesn’t work in all browsers and can be annoying for the user.

The fullScreenOn function changes the video to a ‘fixed’ positioning, puts it at 0,0 in the browser window, and stretches it to the width of the window. It then repositions the controller at the bottom. I’m also adding a “fs-active” class to the button to change the look of the fullscreen icon.

function fullScreenOn(){
  videoIsFullScreen = true;
  videoOrigWidth = video.offsetWidth;
  videoOrigHeight = video.offsetHeight;

  video.style.width = window.innerWidth + "px";
  video.style.height = window.innerHeight + "px";
  video.style.position = "fixed";
  video.style.left = 0;
  video.style.top = 0;
  controls.style.position = "fixed";
  positionController();

  fullScreenControl.className = "fs-active control";
}

The fullScreenOff function resets the video to the original position, width, and height.

function fullScreenOff(){
  videoIsFullScreen = false;
  video.style.width = videoOrigWidth + "px";
  video.style.height = videoOrigHeight + "px";
  video.style.position = "static";
  controls.style.position = "absolute";
  positionController();
  fullScreenControl.className = "control";
}

Next we need to add an even listener to handle clicks on the full screen button.

fullScreenControl.addEventListener("click", function(){
  if (!videoIsFullScreen) {
    fullScreenOn();
  } else {
    fullScreenOff();
  }
}, true);

Conclusion

If you’ve found this useful I’d appreciate a link or a tweet. And if you can expand on or improve this I would love to hear about it. Thanks!

Final code version.

Pure Transcoders:

FlixCloud — On-Demand Video Encoding Powered by On2 Flix Engine, Amazon EC2 and Zencoder
Encoding.com — On Demand Video Encoding
HeyWatch! — Video encoding web service
HDCloud — Video Encoding and Video Transcoding In The Cloud
Zencoder — Online Video Encoding

Closer to Platforms

mPOINT — Online Video Transcoding and Syndication
Multicast — Live Internet broadcast leader. Online video platform.

It would probably be best to switch to the dot com, just to make it easier on everyone for the long run, and sooner rather than later.

Last weekend a friend and I put a little more work into our snorkel website. We’ve still got a ways to go, but it’s looking a million times better than it did. Apparently it paid off because today I got an email that we made a sale! We sold a pink Kapitol Reef Snorkel interestingly enough. We only sell Kapitol Reef snorkels at this point, but pink is the last color I expected.

Soon we’ll be branching out into other upcoming Kapitol Reef products, including masks, fins, and a pretty slick package that contains everything you need to snorkel like a pro. We really like Kapitol Reef products because they’re reliable and technologically advanced, but if things go well enough we’ll look into selling other snorkel brands as well.

We built the store using Shopify, a pretty nice online store system that was built using Ruby on Rails (the language/framework Sevenwire uses for web apps). Their template system is probably the best I’ve seen. The only downsides so far is that we don’t make enough yet to justify upgrading our plan to get some features we want. Namely coupons and user reviews. User reviews is actually a separate plugin that costs $30/month, which would double how much we’re paying for Shopify. I doubt we’ll ever make enough to justify spending $30/month for reviews, and coupons is the only feature we’d want from the next higher up plan. If we start selling enough it might be worth it, but we’ll see.

Buy Kapitol Reef Snorkels Online

Today is my sister’s birthday, and for her gift I’m moving her new baby’s website from Totsites to Tumblon, and getting her a year of the premium subscription. Both sites allow you to blog about your child, post photos, notify family members, etc., but Totsites has super cheesy templates while Tumblon is really clean. Not to mention it’s owned by a friend of mine from Zencoder, John Dahl.

The process went smoothly enough. My sister only had about 5 blog entries, and those were easy enough to cut and past over. The only issue there is I couldn’t change the date of the new post, so I had to add an “Originally posted” line.

Photos were a bit of a challenge. My sister had over 100 photos on the old site, most with captions. I needed to download each and move them over to Tumblon. Luckily I’m currently staying with my friend Justin, a programming super stud. He saw me tirelessly copying each one at time, scolded me for not doing it programatically, then helped me write a Ruby script that would parse image URLs from Totsites, download them to my computer, and name them with their captions for easy importing into Tumblon (which has an awesome multi-photo uploader). I should probably give that script to Tumblon.

I did run into an issue with the Tumblon photo uploader when I tried adding more photos than the 50 that my free account allowed for the month. It stalled in the middle of the group and then wouldn’t let me delete or edit the ones that had been uploaded. I sent a letter to support, but I upgraded to the premium account and that fixed everything anyway.

Tumblon has some awesome developmental info built into the service. I can’t quite use it myself, but I think my sister will appreciate it. Anyway, I don’t want to give out my sister’s page, but here’s mine.

http://heffernan.tumblon.com/

Best Parenting Website

I wanted to add both Zencoder and Flix Cloud to a list of video editing software on Wikipedia, but Wikipedia is pretty picky about external links. My links got erased after only a day.

To make it more legit, I created these pages: Zencoder, Flix Cloud. I’ll be interested to see how long they last. I don’t think there’s anything wrong with the pages I created, in fact I used references more than most other pages I’ve seen, but since my motivation was more on the side of promotion I’m a little nervous. It makes me wonder how any other page about a specific company got on to the wiki if it wasn’t for self promotion. Are there actually people out there who care enough about the completeness of the info that they’ll spend their time doing the necessary research?

Even if there is, it’s still up to the company to maintain the page and make sure no slanderous material gets in there. At APU we used to have to fix changes from Biola students saying we weren’t a Christian university anymore.

Anyway, I’m gonna keep an eye on those pages, and hopefully nobody finds an issue with them.

UPDATE

Um, well, next day:

“A tag has been placed on Flix Cloud, requesting that it be speedily deleted from Wikipedia. This has been done under the criteria for speedy deletion, because the article seems to be blatant advertising that only promotes a company, product, group, service or person and would need to be fundamentally rewritten in order to become an encyclopedia article. Please read the general criteria for speedy deletion, particularly item 11, as well as the guidelines on spam.
If you can indicate why the subject of this article is not blatant advertising, you may contest the tagging. To do this, please add {{hangon}} on the top of Flix Cloud and leave a note on the article’s talk page explaining your position. Please do not remove the speedy deletion tag yourself, but don’t hesitate to add information to the article that would help make it encyclopedic, as well as adding any citations from independent reliable sources to ensure that the article will be verifiable. Feel free to leave a note on my talk page if you have any questions about this. Jim Ward (talk·stalk) 23:56, 16 April 2009 (UTC)”

I’ll admit, I did a slightly better job on the Zencoder entry, which seems to be surviving. I still used independent resources as references, but I didn’t have any thing like “Founded in 2008 by blah blah”. Oh well. I’ll try again later.

When eBay was first gaining popularity I bought a good amount of stuff there, but I never actually sold anything. I think it was the hassle of having to package something and send it off that kept me from trying.

Now, however, I’m on a kick to get rid of as much stuff as I can, and I might as well try to make some extra cash while I do it. This started with a dream to become super portable, to the point where I could carry everything I own with me wherever I travel. That’s more possible than ever these days, but it still would be pretty difficult. I’m also considering buying a home soon (not very portable) and the less I have to move the better.

I’ve gathered a lot of crap over the years, and most of it has just continued to lose value. So the sooner the better. I just want to start with one thing though, and go from there. Now to choose what that one thing will be…

A friend and I are starting to look into buying a home. One of the latest Fortune editions has LA with the biggest price drop in 2009 at 25%, and they expect it will continue to drop another 5% in 2010. That plus some upcoming government incentives make it a good time to start looking for the perfect deal.

 Unfortunately looking for a home on the interwebs isn’t nearly as easy as it should be. The largest database is apparently the MLS, but they seem to be a hodgepodge of crappy search engines built into even crappier real estate website. And the home information is limited, which I assume is to help keep real estate agents in a job. Though they are apparently starting to open the doors.

I started looking into homes about a year ago and found Zillow and Trulia. These websites gave me a little hope, but they definitely had a limited number of listings, many of which seemed out of date.

This time around however, I found Redfin. While the other two said they found more homes in a search in Glendora, Redfin showed what seemed like 10x more on the map. Their map is way more polished as well, with easy filtering, and the ability to distinguish between “for sale by owner”, “for sale by agent”, and bank owned homes. Also, I’ve yet to find a home in my agent’s MLS listings that hasn’t also been in Redfin. It really does kick butt.

On a related note, I found mortgagecalculator.org pretty useful. It does a good job of showing you exactly how your mortgage works out.

Interestingly enough, I really like it. I might even make a similar Wordpress theme for this blog. 

The main reason I suddenly decided to update it is that some how, steveheffernan.com has a Page Rank of 5. Page Rank is one way Google grade’s your web pages.

It’s based mostly on external links to a page, and has a scale of 1 to 10, 10 being the highest, and only the Google homepage has a 10. The scale is an exponential scale, kind of like the Richter Scale for earthquakes, so every level requires more links to move up to than the last. To give you some perspective, Sevenwire has a PR of 4, APU has a PR of 7, Albino Kraken (the blog of my only subscriber) has a PR of 2, and this blog has a PR of 0. I’m done explaining that, here’s a wikipedia link.

The weird thing is, Google itself tells me it only knows of one link to steveheffernan.com, and it’s from THIS BLOG. So I don’t get it, but I’m not gonna complain. I’m just gonna use it to to boost all my other projects’ SEO, hence the link-ridden new steveheffernan.com.

check it, yo

If you don’t know, you can tell a page is secure by the “https” instead of just “http” in the web address. If a page isn’t secure, your information is being sent through the web as clear text, so somebody watching the signals in the tubes can steal your info.

Here’s a pic of the offending site that does not have the “https” yet is requesting CC info. Technically if this page submitted to a secure page it would be okay, but it doesn’t. I didn’t feel like buying more parking to show the really bad page.

So after seeing this I looked for some contact info where I could let somebody know of the security hole. I found a “contact us” link at bottom, and it didn’t work! In fact none of the links in the footer worked. I’m not sure why I was surprised. The links pointed to “#”, which is kind of a place holder address where you’ll put something later.

So dumb…

I received this email the very next day:

Mr. Heffernan,

This has been fixed. Thank you for your feedback and because of our
feedback on this issue we have asked our Marketing Department to fix the
problem and today, they did announce that is now secure with https.
Thank you for remaining a loyal customer!

Thank You, 

Alexis Torrence 

Park N Fly Headquarters
Frequent Parker Program
 

So yeah, pretty quick response time. I’m impressed. I didn’t think that would actually work. I checked and the security issue has been fixed. The footer links are still broken, but that’s a minor issue in comparison. Not bad Park ‘N Fly. For that I’ll give you an SEO link: Airport Parking