// Set lesson times (in seconds)
var link_1_track = 150; //2:30
var link_2_track = 456; //7:36
var link_3_track = 665; //11:05
// Variables for status messages
var link_1_status = jQuery('.link_1_status');
var link_2_status = jQuery('.link_2_status');
var link_3_status = jQuery('.link_3_status');
var main_status = jQuery('.main_status');
// Message displayed when link is playing
var playNotice = ' - <strong><i>Now playing</i></strong>';
// Function to hide all status messages
hidePlayNoticeAll = function() {
jQuery(".link_1_status").html("");
jQuery(".link_2_status").html("");
jQuery(".link_3_status").html("");
}
// Load Vimeo API for the embedded video
var iframe_player = jQuery('#player_1')[0];
var player_1 = $f(iframe_player);
// Option listeners for pause, finish, and playProgress
// Note: If you want to use this, you must define the functions or links wont work
player_1.addEvent('ready', function() {
player_1.addEvent('pause', onPause);
player_1.addEvent('finish', onFinish);
player_1.addEvent('playProgress', onPlayProgress);
});
// Functions for each listener event
function onPause(id) { // When the video is paused, do this.
jQuery(".main_status").html('Paused');
}
function onFinish(id) { // When the video is finished, do this.
jQuery(".main_status").html('Finished');
}
function onPlayProgress(data, id) { // While the video is playing, do this.
jQuery(".main_status").html('Playing - ' + data.seconds + 's played'); // data.percent can also be used.
}
// Function to control what happens when each lesson link is clicked
function setupLinks() {
jQuery(".link_1").click(function () {
player_1.api('play'); //Play the video
player_1.api('seekTo', link_1_track); //Seek to the number of seconds in the variable link_1_track
hidePlayNoticeAll(); // Hide all status messages before displaying (to prevent them from sticking)
jQuery(".link_1_status").html(playNotice); //Display status message (playNotice) within span with class link_1_status
});
jQuery(".link_2").click(function () {
player_1.api('play');
player_1.api('seekTo', link_2_track);
hidePlayNoticeAll();
jQuery(".link_2_status").html(playNotice);
});
jQuery(".link_3").click(function () {
player_1.api('play');
player_1.api('seekTo', link_3_track);
hidePlayNoticeAll();
jQuery(".link_3_status").html(playNotice);
});
}
setupLinks();
<div class="video">
<iframe id="player_1" src="//player.vimeo.com/video/59785024?title=0&byline=0&portrait=0?api=1&player_id=player_1" width="400" height="170" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="links">
02:30 - <a class="link_1" href="javascript:void(0);" target="_self">Link 1</a><span class="link_1_status"></span><br/>
07:36 - <a class="link_2" href="javascript:void(0);" target="_self">Link 2</a><span class="link_2_status"></span><br/>
11:05 - <a class="link_3" href="javascript:void(0);" target="_self">Link 3</a><span class="link_3_status"></span>
</div>
<div>Status: <span class="main_status">Ready</span></div>
.video {width:100%;margin-bottom:20px;}
.links {width:100%;margin-bottom:20px;}
External resources loaded into this fiddle: