SublimeVideo playlists

sublimevideo_multiple_playlists.html

<!-- http://docs.sublimevideo.net/playlists -->

<div id="playlist1" class="interactive">
  <div class="video_wrap">
    <video id="video1" class="sublime" poster="posterframe1.jpg"
           width="640" height="360" preload="none">
      <source src="video1.mp4" />
      <source src="video1.webm" />
    </video>
  </div>
  <div class="video_wrap">
    <video id="video2" poster="posterframe2.jpg"
           width="640" height="360" preload="none">
      <source src="video2.mp4" />
      <source src="video2.webm" />
    </video>
  </div>

  <ul>
    <li id="thumbnail_video1">
      <a href="">
        <img alt="Thumbnail 1" src="thumbnail1.jpg" width="178" height="76" />
      </a>
    </li>
    <li id="thumbnail_video2">
      <a href="">
        <img alt="Thumbnail 2" src="thumbnail2.jpg" width="178" height="76" />
      </a>
    </li>
  </ul>
</div>

<div id="playlist2" class="interactive">
  <div class="video_wrap">
    <video id="video3" class="sublime" poster="posterframe3.jpg"
           width="640" height="360" preload="none">
      <source src="video3.mp4" />
      <source src="video3.webm" />
    </video>
  </div>
  <div class="video_wrap">
    <video id="video4" poster="posterframe4.jpg"
           width="640" height="360" preload="none">
      <source src="video4.mp4" />
      <source src="video4.webm" />
    </video>
  </div>

  <ul>
    <li id="thumbnail_video3">
      <a href="">
        <img alt="Thumbnail 3" src="thumbnail3.jpg" width="178" height="76" />
      </a>
    </li>
    <li id="thumbnail_video4">
      <a href="">
        <img alt="Thumbnail 4" src="thumbnail4.jpg" width="178" height="76" />
      </a>
    </li>
  </ul>
</div>

sublimevideo_playlists-jquery.js

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

var SublimeVideo = SublimeVideo || {};

$(document).ready(function() {
  // Automatically instantiate all the playlists in the page
  $('.interactive').each(function() { SublimeVideo[$(this).attr('id')] = new InteractiveThumbnailsHandler($(this).attr('id')); });
});

var InteractiveThumbnailsHandler = function(interactiveWrapperId){
  this.interactiveWrapperId = interactiveWrapperId;
  this.videosCount = $("#" + this.interactiveWrapperId + " .video_wrap").size();

  var matches = $("#" + this.interactiveWrapperId + " video").attr("id").match(/^video(\d+)$/);
  this.firstVideoIndex = parseInt(matches[1], 10);

  this.setupObservers();

  this.loadDemo();
};

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

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

        if (!$(this).hasClass("active")) {
          that.clickOnThumbnail($(this).attr("id"));
        }
      });
    });
  },
  loadDemo: function() {
    // Only if not the first time here
    if (this.activeVideoId) this.reset();

    this.activeVideoId = "video" + this.firstVideoIndex;

    // Show first video
    this.showActiveVideo();
  },
  reset: function() {
    // Hide the current active video
    $("#" + this.interactiveWrapperId + " .video_wrap.active").removeClass("active");

    // Get current active video and unprepare it
    // we could have called sublimevideo.unprepare() without any arguments, but this is faster
    sublimevideo.unprepare(this.activeVideoId);

    // Deselect its thumbnail
    this.deselectThumbnail(this.activeVideoId);
  },
  clickOnThumbnail: function(thumbnailId) {
    // Basically undo all the stuff and bring it back to the point before js kicked in
    this.reset();

    // Set the new active video
    this.activeVideoId = thumbnailId.replace(/^thumbnail_/, "");

    // And show the video
    this.showActiveVideo();

    // And finally, prepare and play it
    sublimevideo.prepareAndPlay(this.activeVideoId);
  },
  selectThumbnail: function(videoId) {
    $("#thumbnail_" + videoId).addClass("active");
  },
  deselectThumbnail: function(videoId) {
    $("#thumbnail_" + videoId).removeClass("active");
  },
  showActiveVideo: function() {
    // Select its thumbnail
    this.selectThumbnail(this.activeVideoId);

    // Show it
    $("#" + this.activeVideoId).parentsUntil('video_wrap').addClass("active");
  },
  handleAutoNext: function(endedVideoId) {
    var nextId = parseInt(endedVideoId.replace(/^video/, ""), 10) + 1;
    if (nextId > 1 && nextId < this.firstVideoIndex + this.videosCount) {
      this.clickOnThumbnail("thumbnail_video" + nextId);
    }
  }
});

sublimevideo.ready(function() {
  sublimevideo.onEnd(function(sv) {
    var matches = sv.element.id.match(/^video(\d+)$/);
    if (matches != undefined) {
      var playlistId = $(sv.element).parents('.interactive').attr("id");
      if (parseInt(matches[1], 10) <= SublimeVideo[playlistId].firstVideoIndex + SublimeVideo[playlistId].videosCount) {
        SublimeVideo[playlistId].handleAutoNext(sv.element.id);
      }
    }
  });
});

sublimevideo_playlists-prototype.js

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

var SublimeVideo = SublimeVideo || {};

document.observe("dom:loaded", function() {
  // Automatically instantiate all the playlists in the page
  $$('.interactive').each(function(el) { SublimeVideo[el.id] = new InteractiveThumbnailsHandler(el.id); });
});

var InteractiveThumbnailsHandler = Class.create({
  initialize: function(interactiveWrapperId) {
    this.interactiveWrapperId = interactiveWrapperId;
    this.videosCount = $$("#" + this.interactiveWrapperId + " .video_wrap").size();

    var matches = $$("#" + this.interactiveWrapperId + " video")[0].id.match(/^video(\d+)$/);
    this.firstVideoIndex = parseInt(matches[1], 10);

    this.setupObservers();

    this.loadDemo();
  },
  setupObservers: function() {
    $$("#" + this.interactiveWrapperId + " li").each(function(thumb) {
      thumb.on("click", function(event) {
        event.stop();

        if (!thumb.hasClassName("active")) {
          this.clickOnThumbnail(thumb.readAttribute("id"));
        }
      }.bind(this));
    }.bind(this));
  },
  loadDemo: function() {
    // Only if not the first time here
    if (this.activeVideoId) this.reset();

    this.activeVideoId = "video" + this.firstVideoIndex;

    // Show first video
    this.showActiveVideo();
  },
  reset: function() {
    // Hide the current active video
    $$("#" + this.interactiveWrapperId + " .video_wrap.active").first().removeClassName("active");

    // Get current active video and unprepare it
    // we could have called sublimevideo.unprepare() without any arguments, but this is faster
    sublimevideo.unprepare(this.activeVideoId);

    // Deselect its thumbnail
    this.deselectThumbnail(this.activeVideoId);
  },
  clickOnThumbnail: function(thumbnailId) {
    // Basically undo all the stuff and bring it back to the point before js kicked in
    this.reset();

    // Set the new active video
    this.activeVideoId = thumbnailId.replace(/^thumbnail_/, "");

    // And show the video
    this.showActiveVideo();

    // And finally, prepare and play it
    sublimevideo.prepareAndPlay(this.activeVideoId);
  },
  selectThumbnail: function(videoId) {
    $("thumbnail_" + videoId).addClassName("active");
  },
  deselectThumbnail: function(videoId) {
    $("thumbnail_" + videoId).removeClassName("active");
  },
  showActiveVideo: function() {
    // Select its thumbnail
    this.selectThumbnail(this.activeVideoId);

    // Show it
    $(this.activeVideoId).up().addClassName("active");
  },
  handleAutoNext: function(endedVideoId) {
    var nextId = parseInt(endedVideoId.replace(/^video/, ""), 10) + 1;
    if (nextId > 1 && nextId < this.firstVideoIndex + this.videosCount) {
      this.clickOnThumbnail("thumbnail_video" + nextId);
    }
  }
});

sublimevideo.ready(function() {
  sublimevideo.onEnd(function(sv) {
    var matches = sv.element.id.match(/^video(\d+)$/);
    if (matches != undefined) {
      var playlistId = sv.element.up('.interactive').id;
      if (parseInt(matches[1], 10) <= SublimeVideo[playlistId].firstVideoIndex + SublimeVideo[playlistId].videosCount) {
        SublimeVideo[playlistId].handleAutoNext(sv.element.id);
      }
    }
  });
});

sublimevideo_playlists.css

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

/* 
* You probably want to set the same width and height
* that you have set to your <video> elements.
*/
.interactive .video_wrap {
  width:640px;
  height:360px;
  display:none;
}
.interactive .video_wrap.active {
  display:block;
}

/* This will make distinguishable the currently selected thumbnail */
.interactive li.active {
  background:#000;
}

/* This will create a simple hover effect */
.interactive li img {
  opacity:.7;
}
.interactive li a:hover img, .interactive li.active img {
  opacity:1;
}

sublimevideo_playlists.html

<!-- http://docs.sublimevideo.net/playlists -->

<div id="playlist1" class="interactive">
  <div class="video_wrap">
    <video id="video1" class="sublime" poster="posterframe1.jpg"
           width="640" height="360" preload="none">
      <source src="video1.mp4" />
      <source src="video1.webm" />
    </video>
  </div>
  <div class="video_wrap">
    <video id="video2" poster="posterframe2.jpg"
           width="640" height="360" preload="none">
      <source src="video2.mp4" />
      <source src="video2.webm" />
    </video>
  </div>

  <ul>
    <li id="thumbnail_video1">
      <a href="">
        <img alt="Thumbnail 1" src="thumbnail1.jpg" width="178" height="76" />
      </a>
    </li>
    <li id="thumbnail_video2">
      <a href="">
        <img alt="Thumbnail 2" src="thumbnail2.jpg" width="178" height="76" />
      </a>
    </li>
  </ul>
</div>