Created
December 21, 2011 20:32
-
-
Save eddietejeda/1507574 to your computer and use it in GitHub Desktop.
SublimeVideo playlists
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** 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); | |
} | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** 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); | |
} | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment