jQuery(function ($) { // Document Ready (important!) // Get the video element that we wish to control var iframe = document.getElementById('thevideo'); // Initialize Froogaloop (linked .js.min file) on the captured video var player = $f(iframe); // When a link with a class of "timecode" is clicked, capture the event $('.timecode').on('click', function (e) { // Prevent the default link (typically a hash) from executing e.preventDefault(); // Get the location value from the HTML5 data parameter var seekVal = $(this).attr('data-seek'); // Using Froogaloop, trigger the SeekTo method using the captured value player.api('seekTo', seekVal); }); });

HTML chapter markers for a Vimeo video

The following pen is a commented demo of how to simplify Vimeo's Froogaloop API for quick creation of chapter markers in a project. In this pen we capture a chapter marker on click, pass it to an external JS file, then control the on-page video through the provided API. The follow up pen will deal with live transcriptions. I'll restore the original Steampunk video in a bit - I made a mistake and edited a live pen. The functionality is still intact.