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.

It’s super quiet except for the occasional house noise, or distant truck struggling up a hill. A little creepy. I’m fighting the urge to think of scenes from The Shining. It probably didn’t help that I drank some caffeine then went to bed early.

Last year around this time I started writing one post every day. Even though I only made it through a few months, it was a great excercise, so I’m trying it again. It should be a little easier this time since i’m so secluded.

Also my beautiful girlfriend Jenni will be staring up her regular blogging as well, so check it out.

Until tomorrow…if I make it through the night, muahahaha! …frik

http://sevenwire.com/blog/2009/08/26/adobe-air-opening-external-links-in-another-browser.html

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

I recently solved an annoying issue with iChat video not working. Just posting it here incase it’s helpful to anyone else.

Every day Sevenwire has a standup meeting to go over the status of all of our projects. Our office is in Wisconsin, and I’m in California, so I video conference in using I iChat. For the last few days iChat has been giving me an error every time I try to connect using video or audio.

Error -8 (Did not receive a response from …………… )

I looked all over and didn’t find anything that worked. There’s no where to download and reinstall iChat as far as I can tell, unless you do a custom install from the install disks that came with your computer, which I’m not sure where those ended up and doubted that would work anyway. The closest Apple support discussion suggested changing your Quicktime streaming settings:

System Preferences > Quicktime > Streaming to 1.5Mbps and restart iChat

That didn’t work for me, but in the same post the guys mentioned that “Error 8 covers things like ports not being open in a firewall…”. That reminded me that recently I had turned on Internet Sharing to share my wireless internet to a computer connected by Ethernet. I figured that might be messing with the ports, so I turned it off and wah lah! Fixed.

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.