The following video is using the Classic design (this is the default design).
<ul class="l-text-list">
<li><a href='' class='seek_to' data-seek-to='25'>Seek to 25% of the video</a></li>
<li><a href='' class='seek_to' data-seek-to='50'>Seek to 50% of the video</a></li>
<li><a href='' class='seek_to' data-seek-to='75'>Seek to 75% of the video</a></li>
</ul>
<video id="video1" class="sublime" data-settings="uid:demo-player-api-seek-to; autoresize:fit;" title="Demo: Player API, Seek to" poster="http://media.sublimevideo.net/vpa/ms_800.jpg" width="640" height="360" preload="none" style="display:none">
<source src="http://media.sublimevideo.net/vpa/ms_360p.mp4" />
<source src="http://media.sublimevideo.net/vpa/ms_360p.webm" />
</video>
sublime.ready(function() {
sublime.prepare("video1", function(player) {
var duration = null, currentSeekPercentage = null;
player.on("metadata", function(p) {
duration = p.duration();
// User wants to seek, let's seek!
if (currentSeekPercentage != null) {
player.seekTo((duration / 100) * currentSeekPercentage);
}
});
$(".seek_to").on("click", function(event) {
event.preventDefault();
currentSeekPercentage = parseInt($(event.target).data("seek-to"));
player.play();
// We need the video duration in order to seek!
if (duration != null) {
player.seekTo((duration / 100) * currentSeekPercentage);
}
});
});
});