<video id="vid"
    poster="img/kitchen.png" 
    data-firstfile="kitchen" 
    data-secondfile="view" 
    width="900" controls>
  <source src="media/kitchen.mp4" type="video/mp4">
  <source src="media/kitchen.webm" type="video/webm">
  <source src="media/kitchen.ogv" type="video/ogg">
</video>
/* none */
var video, firstFileName, secondFileName, forEach;

forEach = Array.prototype.forEach;
video = document.getElementById('vid');

firstFileName = video.getAttribute('data-firstfile');
secondFileName = video.getAttribute('data-secondfile');

video.addEventListener('ended', function() {
  sources = this.getElementsByTagName('source');

  // check to see if the last video is not loaded
  if(sources[0].src.indexOf(secondFileName) === -1){
    forEach.call(sources, function(source) {
      source.src = source.src.replace(firstFileName, secondFileName);
    });

    this.load();
    this.play();
  }
});