Edit in JSFiddle

<div id="playlist1" class='sv_playlist'>
  <div class='video_wrap'>
    <video id='video1' poster='http://media.sublimevideo.net/v/midnight_sun_sv1_2_800.jpg' width='432' height='243' preload='none'>
      <source src='http://media.sublimevideo.net/v/midnight_sun_sv1_2_360p.mp4' />
      <source src='http://media.sublimevideo.net/v/midnight_sun_sv1_2_360p.webm' />
    </video>
  </div>
  <div class='video_wrap'>
    <video id='video2' poster='http://media.sublimevideo.net/v/midnight_sun_sv1_3_800.jpg' width='432' height='243' preload='none'>
      <source src='http://media.sublimevideo.net/v/midnight_sun_sv1_3_360p.mp4' />
      <source src='http://media.sublimevideo.net/v/midnight_sun_sv1_3_360p.webm' />
    </video>
  </div>
  <div class='video_wrap'>
    <video id='video3' poster='http://media.sublimevideo.net/v/midnight_sun_sv1_4_800.jpg' width='432' height='243' preload='none'>
      <source src='http://media.sublimevideo.net/v/midnight_sun_sv1_4_360p.mp4' />
      <source src='http://media.sublimevideo.net/v/midnight_sun_sv1_4_360p.webm' />
    </video>
  </div>
  <ul class='thumbs'>
    <li id='thumbnail_video1'>
      <a href=''>
        <img alt='' src='http://media.sublimevideo.net/v/midnight_sun_sv1_2_144.jpg' width='127' height='71' />
        <span class='play' />
      </a>
    </li>
    <li id='thumbnail_video2'>
      <a href=''>
        <img alt='' src='http://media.sublimevideo.net/v/midnight_sun_sv1_3_144.jpg' width='127' height='71' />
        <span class='play' />
      </a>
    </li>
    <li id='thumbnail_video3' class='last_thumbnail'>
      <a href=''>
        <img alt='' src='http://media.sublimevideo.net/v/midnight_sun_sv1_4_144.jpg' width='127' height='71' />
        <span class='play' />
      </a>
    </li>
  </ul>
</div>

// playlist

/** http://docs.sublimevideo.net/playlists **/
/** jQuery version **/

var SublimeVideo = SublimeVideo || { playlists: {} };

$(document).ready(function() {
  // A SublimeVideoPlaylist instance can takes some options:
  //  - autoplayOnPageLoad: whether or not to autoplay the playlist on page load. Note that if you set it to true,
  //    you should remove the 'sublime' class from the first video in the playlist.
  //  - loadNext: whether or not to load the next item in the playlist once a video playback ends
  //  - autoplayNext: whether or not to autoplay the next item in the playlist once a video playback ends
  //  - loop: whether or not to loop the entire playlist once the last video playback ends
  var playlistOptions = { autoplayOnPageLoad: false, loadNext: true, autoplayNext: true, loop: false };

  // Automatically instantiate all the playlists in the page
  $('.sv_playlist').each(function(i, el) {
    SublimeVideo.playlists[el.id] = new SublimeVideoPlaylist(el.id, playlistOptions);
  });
});

var SublimeVideoPlaylist = function(playlistWrapperId, options){
  if (!$("#" + playlistWrapperId)) return;
        
  this.options = options;
  this.playlistWrapperId = playlistWrapperId;
  this.firstVideoId = $("#" + this.playlistWrapperId + " video").attr("id");

  this.setupObservers();
  this.updateActiveVideo(this.firstVideoId);
};

$.extend(SublimeVideoPlaylist.prototype, {
  setupObservers: function() {
    var that = this;

    $("#"+ this.playlistWrapperId + " li").each(function() {
      $(this).click(function(event) {
        event.preventDefault();

        if (!$(this).hasClass("active")) {
          that.clickOnThumbnail($(this).attr("id"), that.options['autoplayNext']);
        }
      });
    });
  },
  reset: function() {
    // Hide the current active video
    $("#" + this.playlistWrapperId + " .video_wrap.active").removeClass("active");

    // Get current active video and unprepare it
    sublime.unprepare($("#" + this.activeVideoId)[0]);

    // Deselect its thumbnail
    this.deselectThumbnail(this.activeVideoId);
  },
  clickOnThumbnail: function(thumbnailId, autoplay) {
    var that = this;

    this.updateActiveVideo(thumbnailId.replace(/^thumbnail_/, ""));

    sublime.prepare($("#" + this.activeVideoId)[0], function(player){
      if (autoplay) player.play(); // Play it if autoplay is true
      player.on({
        start: that.onVideoStart,
        play: that.onVideoPlay,
        pause: that.onVideoPause,
        end: that.onVideoEnd,
        stop: that.onVideoStop
      });
    });
  },
  selectThumbnail: function(videoId) {
    $("#thumbnail_" + videoId).addClass("active");
  },
  deselectThumbnail: function(videoId) {
    $("#thumbnail_" + videoId).removeClass("active");
  },
  updateActiveVideo: function(videoId) {
    // Basically undo all the stuff and bring it back to the point before js kicked in
    if (this.activeVideoId) this.reset();

    // Set the new active video
    this.activeVideoId = videoId;

    // And show the video
    this.showActiveVideo();
  },
  showActiveVideo: function() {
    // Select its thumbnail
    this.selectThumbnail(this.activeVideoId);

    // Show it
    $("#" + this.activeVideoId).parent().addClass("active");
  },
  handleAutoNext: function(newVideoId) {
    this.clickOnThumbnail(newVideoId, this.options['autoplayNext']);
  },
  onVideoStart: function(player) {
    // console.log('Stop event!')
  },
  onVideoPlay: function(player) {
    // console.log('Play event!')
  },
  onVideoPause: function(player) {
    // console.log('Pause event!')
  },
  onVideoEnd: function(player) {
    // console.log('End event!')
    var videoId = player.videoElement().id;
    if (videoId.match(/^video([0-9]+)$/) !== undefined) {
      var playlistId    = $(player.videoElement()).parents('.sv_playlist').attr("id");
      var nextThumbnail = $("#thumbnail_" + videoId).next("li");

      if (nextThumbnail.length > 0) {
        if (SublimeVideo.playlists[playlistId].options['loadNext']) {
          SublimeVideo.playlists[playlistId].handleAutoNext(nextThumbnail.attr("id"));
        }
      }
      else if (SublimeVideo.playlists[playlistId].options['loop']) {
        SublimeVideo.playlists[playlistId].updateActiveVideo(SublimeVideo.playlists[playlistId].firstVideoId);
        SublimeVideo.playlists[playlistId].handleAutoNext(SublimeVideo.playlists[playlistId].activeVideoId);
      }
      else { player.stop(); }
    }
  },
  onVideoStop: function(player) {
    // console.log('Stop event!')
  }
});

sublime.ready(function() {
  for (var playlistId in SublimeVideo.playlists) {
    SublimeVideo.playlists[playlistId].clickOnThumbnail(SublimeVideo.playlists[playlistId].activeVideoId, SublimeVideo.playlists[playlistId].options['autoplayOnPageLoad']);
  }
});

.sv_playlist {
  width:575px;
  height:245px;
  padding:13px;
  float:left;
  margin-right:40px;
  background:#c5d0d9;
}

.sv_playlist .video_wrap {
  width:768px;
  height:432px;
  display:none;
}

.sv_playlist .video_wrap {
  width:432px;
  height:243px;
  display:none;
  float:left;
  background:#fff;
  padding:1px;
}

.sv_playlist .video_wrap.active {
  display:block;
}

.sv_playlist ul.thumbs {
  list-style-type:none;
  width:180px;
  float:left;
}

.sv_playlist ul.thumbs {
  width:139px;
}

.sv_playlist li {
  display:block;
  width:144px;
  height:81px;
  margin-right:16px;
  margin-bottom:34px;
  background:#000;
  border:1px solid #000;
}

.sv_playlist li {
  width:127px;
  height:71px;
  margin:0 0 13px 12px;
}

.sv_playlist li.active {
  border-color:#fff;
}

.sv_playlist li a {
  display:block;
  position:relative;
}

.sv_playlist li a span.play {
  display:block;
  width:144px;
  height:81px;
  background:url(http://media.jilion.com/images/playlist_play_icon.png) no-repeat center;
  background-color:rgba(0,0,0,0.6);
  position:absolute;
  top:0;
  left:0;
}

.sv_playlist li a span.play {
  width:127px;
  height:71px;
}

.sv_playlist li a:hover span.play {
  background-color:rgba(0,0,0,0);
}

.sv_playlist li.active a span.play {
  background:none;
}