Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 7th, 2012  |  syntax: None  |  size: 3.89 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /** http://docs.sublimevideo.net/playlists **/
  2. /** jQuery version **/
  3.  
  4. var SublimeVideo = SublimeVideo || { playlists: {} };
  5.  
  6. jQuery(document).ready(function() {
  7.   // Automatically instantiate all the playlists in the page
  8.   jQuery('.playlist').each(function() { SublimeVideo.playlists[jQuery(this).attr('id')] = new SublimeVideoPlaylist(jQuery(this).attr('id')); });
  9. });
  10.  
  11. var SublimeVideoPlaylist = function(playlistWrapperId){
  12.   if (!jQuery("#" + playlistWrapperId)) return;
  13.  
  14.   this.playlistWrapperId = playlistWrapperId;
  15.   this.videosCount = jQuery("#" + this.playlistWrapperId + " .video_wrap").size();
  16.  
  17.   var matches = jQuery("#" + this.playlistWrapperId + " video").attr("id").match(/^video([0-9]+)$/);
  18.   this.firstVideoIndex = parseInt(matches[1], 10);
  19.   this.lastVideoIndex = this.firstVideoIndex + this.videosCount - 1;
  20.  
  21.   this.setupObservers();
  22.  
  23.   this.loadDemo();
  24. };
  25.  
  26. jQuery.extend(SublimeVideoPlaylist.prototype, {
  27.   setupObservers: function() {
  28.     var that = this;
  29.  
  30.     jQuery("#"+ this.playlistWrapperId + " li").each(function() {
  31.       jQuery(this).click(function(event) {
  32.         event.preventDefault();
  33.  
  34.         if (!jQuery(this).hasClass("active")) {
  35.           that.clickOnThumbnail(jQuery(this).attr("id"));
  36.         }
  37.       });
  38.     });
  39.   },
  40.   loadDemo: function() {
  41.     // Only if not the first time here
  42.     if (this.activeVideoId) this.reset();
  43.  
  44.     this.activeVideoId = "video" + this.firstVideoIndex;
  45.  
  46.     // Show first video
  47.     this.showActiveVideo();
  48.   },
  49.   reset: function() {
  50.     // Hide the current active video
  51.     jQuery("#" + this.playlistWrapperId + " .video_wrap.active").removeClass("active");
  52.  
  53.     // Get current active video and unprepare it
  54.     // we could have called sublimevideo.unprepare() without any arguments, but this is faster
  55.     sublimevideo.unprepare(this.activeVideoId);
  56.  
  57.     // Deselect its thumbnail
  58.     this.deselectThumbnail(this.activeVideoId);
  59.   },
  60.   clickOnThumbnail: function(thumbnailId) {
  61.     // Basically undo all the stuff and bring it back to the point before js kicked in
  62.     this.reset();
  63.  
  64.     // Set the new active video
  65.     this.activeVideoId = thumbnailId.replace(/^thumbnail_/, "");
  66.  
  67.     // And show the video
  68.     this.showActiveVideo();
  69.  
  70.     // And finally, prepare and play it
  71.     sublimevideo.prepareAndPlay(this.activeVideoId);
  72.   },
  73.   selectThumbnail: function(videoId) {
  74.     jQuery("#thumbnail_" + videoId).addClass("active");
  75.   },
  76.   deselectThumbnail: function(videoId) {
  77.     jQuery("#thumbnail_" + videoId).removeClass("active");
  78.   },
  79.   showActiveVideo: function() {
  80.     // Select its thumbnail
  81.     this.selectThumbnail(this.activeVideoId);
  82.  
  83.     // Show it
  84.     jQuery("#" + this.activeVideoId).parent().addClass("active");
  85.   },
  86.   handleAutoNext: function(endedVideoId) {
  87.     var nextId = parseInt(endedVideoId.replace(/^video/, ""), 10) + 1;
  88.     if (nextId > 1 && nextId <= this.lastVideoIndex) {
  89.       this.clickOnThumbnail("thumbnail_video" + nextId);
  90.     }
  91.   }
  92. });
  93.  
  94. sublimevideo.ready(function() {
  95.   // To autoplay a playlist:
  96.   // - remove the "sublime" class of the first video in the playlist to autoplay
  97.   // - uncomment the following line (you can replace "SublimeVideo.playlists[jQuery('.playlist').attr('id')" by the id of the playlist to autoplay)
  98.   // sublimevideo.prepareAndPlay(SublimeVideo.playlists[jQuery('.playlist').attr('id')].activeVideoId);
  99.  
  100.   sublimevideo.onEnd(function(sv) {
  101.     var matches = sv.element.id.match(/^video([0-9]+)$/);
  102.     if (matches != undefined) {
  103.       var playlistId = jQuery(sv.element).parents('.playlist').attr("id");
  104.       if (parseInt(matches[1], 10) < SublimeVideo.playlists[playlistId].lastVideoIndex) {
  105.         SublimeVideo.playlists[playlistId].handleAutoNext(sv.element.id);
  106.       }
  107.       // Uncomment the following 4 lines if you want the whole playlist to loop
  108.       // else {
  109.       //   SublimeVideo.playlists[playlistId].loadDemo();
  110.       //   sublimevideo.prepareAndPlay(SublimeVideo.playlists[playlistId].activeVideoId);
  111.       // }
  112.     }
  113.   });
  114. });