HTML5 Videos

Why use HTML5 Videos

There are many HTML5 video players available for download, but I'd rather build my own. I get more control and don't have to worry about unnecessary code that just keeps on adding into my code footprint. I also understand that some people would rather use embedding from YouTube or Vimeo - that's alright too. One line of code, and you have your video. Unfortunately, you are limitted to their style and controls. I host my own videos, and this is how I do it.

Cropping the Video

Let's take a look at the Video link that got you to this page itself. Did you notice how nicely it fits into that 460 by 290 box? Well, that's because I cropped it first. You could write a code that would stretch your videos, but you lose on quality that way, so I suggest you crop it instead. I used Camtasia Studio. It takes five very simple steps:
  1. File -> Import Media -> select your video
  2. Drag the video into the timeline below -> a popup will open
  3. Select your desired width and height (uncheck "maintain proportions" box if it is checked) -> ok
  4. Stretch your video diagonally until it covers all of the area, then move it as you wish so that the proper area is shown.
  5. Export to MP4

Playing with HTML5 Videos

Well that covers the video. Once you have your video, you can move it into a folder on your server and create the HTML tag as demonstrated here. If the HTML5 is not supported on one of the browsers, the video would not load. What you want to consider is entering secondary option inside the video tag itself. It could be a note to the user, an image, or a backup flash video. I am just entering a comment. You can also use other attributes, such as autoplay and loop as demonstrated.

Code

<video width="460" height="291" autoplay="autoplay" loop="loop">
    <source src="videos/sample.mp4" type="video/mp4" />
</video>

Playing with HTML5 Videos

That was easy, right? Now let's add functionality to this video tag, for the same video. Remember that you can control playback - play, pause, rewind, jump to time, and volume, but for this example I will add play and pause buttons only. Simply add script tag in which you will define the video, and add two buttons for play and pause with onclick.

One step further: seekbar

Lets take it just one last step further and add seekbar control to the video. Now it's in your hands. You can style the buttons any way you wish.

Code

var video = document.getElementsByTagName('video')[0];
<input type="button" value="Play" onclick="video.play()">
<input type="button" value="Pause" onclick="video.pause()">

Code

function updateUI() {
  var lastBuffered = video.buffered.end(video.buffered.length-1);
  seekbar.min = video.startTime;
  seekbar.max = lastBuffered;
  seekbar.value = video.currentTime;
}
function setupSeekbar() {
  seekbar.min = video.startTime;
  seekbar.max = video.startTime + video.duration;
}
function seekVideo() {
  video.currentTime = seekbar.value;
}
video.addEventListener('loadedmetadata', function() {
  var seekbar = document.getElementById('seekbar');
  video.ondurationchange = setupSeekbar;
  seekbar.onchange = seekVideo;
});
<video width="460" height="291" ontimeupdate="updateUI();"... />
<input type="range" step="any" id="seekbar">