We are closing.
DemoThe example presented here allows your visitors to select which video to play by clicking on any of the thumbnails in the playlist. The selected video will be shown in the player; once the video finishes playing, the next one will automatically play.
<!--
1. Please be sure to give a different id to each different playlists.
2. Don"t forget to set the "sv_playlist" class!
-->
<div id="playlist1" class="sv_playlist">
<div class="video_wrap">
<video id="video1" poster="http://media.jilion.com/images/midnight_sun1_800.jpg" width="432" height="243" preload="none" data-autoresize="fit">
<source src="http://media.sublimevideo.net/v/midnight_sun_sv1_1_360p.mp4" />
<source src="http://media.sublimevideo.net/v/midnight_sun_sv1_1_360p.webm" />
</video>
</div>
<div class="video_wrap">
<video id="video2" poster="http://media.sublimevideo.net/v/midnight_sun_sv1_2_800.jpg" width="432" height="243" preload="none" data-autoresize="fit">
<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="video3" poster="http://media.sublimevideo.net/v/midnight_sun_sv1_3_800.jpg" width="432" height="243" preload="none" data-autoresize="fit">
<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="video4" poster="http://media.sublimevideo.net/v/midnight_sun_sv1_4_800.jpg" width="432" height="243" preload="none" data-autoresize="fit">
<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.jilion.com/images/midnight_sun1_144.jpg" />
<span class="play" />
</a>
</li>
<li id="thumbnail_video2">
<a href="">
<img alt="" src="http://media.jilion.com/images/midnight_sun2_144.jpg" />
<span class="play" />
</a>
</li>
<li id="thumbnail_video3" class="last_thumbnail">
<a href="">
<img alt="" src="http://media.jilion.com/images/midnight_sun3_144.jpg" />
<span class="play" />
</a>
</li>
<li id="thumbnail_video4" class="last_thumbnail">
<a href="">
<img alt="" src="http://media.jilion.com/images/midnight_sun4_144.jpg" />
<span class="play" />
</a>
</li>
</ul>
</div>
/** jQuery is needed in this example **/
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);
this.clickOnThumbnail(this.activeVideoId, this.options["autoplayOnPageLoad"]);
};
$.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!")
}
});
var SublimeVideo = SublimeVideo || {};
SublimeVideo.playlists = {};
sublime.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);
});
});
/* Thumbnails below the video */
img {border:none;}
.spacer {clear:both}
.sv_playlist .video_wrap {
width:100%;
display:none;
float:left;
background:#fff;
padding:1px;
-moz-box-shadow:rgba(0,23,60,0.5) 0 4px 17px;
-webkit-box-shadow:rgba(0,23,60,0.5) 0 4px 17px;
box-shadow:rgba(0,23,60,0.5) 0 4px 17px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sv_playlist .video_wrap.active {
display:block;
}
.sv_playlist ul.thumbs {
list-style-type:none;
width:100%;
float:left;
}
.sv_playlist li {
line-height:0;
display:block;
width:23%;
margin:2.4% 2.6668% 10px 0;
background:#000;
float:left;
border:1px solid #000;
-moz-box-shadow:rgba(0,23,60,0.5) 0 2px 10px;
-webkit-box-shadow:rgba(0,23,60,0.5) 0 2px 10px;
box-shadow:rgba(0,23,60,0.5) 0 2px 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sv_playlist li:nth-child(4) {
margin-right:0;
}
.sv_playlist li.active {
border-color:#fff;
}
.sv_playlist li a {
display:block;
position:relative;
}
.sv_playlist li a img {
width:100%;
}
.sv_playlist li a span.play {
display:block;
width:100%;
height:100%;;
/*
Important:
You can find the play icon here: http://f.cl.ly/items/3M0u0p0i0k1l3S0v2b1G/playlist_play_icon.png
Please do not hotlink it!
*/
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;
bottom:0;
-moz-box-shadow:inset rgba(255,255,255,0.3) 0 1px 0;
-webkit-box-shadow:inset rgba(255,255,255,0.3) 0 1px 0;
box-shadow:inset rgba(255,255,255,0.3) 0 1px 0;
-o-transition:background-color,0.25s,linear;
-moz-transition:background-color,0.25s,linear;
-webkit-transition:background-color,0.25s,linear;
transition:background-color,0.25s,linear;
}
.sv_playlist li a:hover span.play {
background-color:rgba(0,0,0,0);
}
.sv_playlist li.active a span.play {
background:none;
}