HTML Видео + текст. Ссылки на части видео в тексте

Здесь расскажу о том, как выделить в тексте фразы, соответствующие определенным частям (времени) видео на странице. Таким образом, например, можно сделать краткое содержание для видео. Еще один вариант - в примере ниже (а заодно, из примера станет понятнее что это и зачем). На странице будет HTML5 видео, в данном случае формат только mp4, так что если не воспроизводится - рекомендую использовать другой браузер.

Собственно, вот видео для примера: (просто небольшая запись с экрана)

Вот код:

<video id="testvideo" controls>
    <source src="files/httpm-video-test.mp4" type="video/mp4">
</video>

В этом видео несколько переходов по страницам сайта, время между ними - части видео на которые в тексте будут добавлены ссылки (или заголовки, если хотите). Сначала показана главная страница, после перехожу на страницу "Вебмастеру", несколько секунд и переход на страницу дополнений/правок к опенкарту, а затем к обзорам хостинга

Ссылки (заголовки) имеют вот такой вид:

<span class="to_video" data-start="0" data-end="16">Часть видео</span>

По классу будем их искать. Так же важны атрибуты:

data-start - начало отрезка видео, в секундах
data-end - конец, в секундах

Ссылки сделаны тегами span, кликабельны.

Стили

.to_video {color:red;cursor: pointer;}
.to_video.active {color: green;}

JS + JQuery скрипт

Внутри немного прокомментировал

/*Определяем видео по id*/
var videoElement = document.getElementById("testvideo");
var times = Array();
var pre_times = Array();
/*Находим все ссылки в тексте, добавляем им уникальные классы, для этого используем дату начала и окончания.*/
$('.to_video').each(function(){
	pre_times = Array();
	pre_times['s'] = $(this).attr('data-start');
	pre_times['e'] = $(this).attr('data-end');
/*Все найденные ссылки заносим в массив с временем начала и окончания*/
	times.push(pre_times);
	$(this).addClass('s-'+pre_times['s']+'-e-'+pre_times['e']);
});
/*Через определенный интервал (в данном случае полторы секунды) ищем ссылки соответствующие текущему времени воспроизведения*/
setInterval(function() {
	$(times).each(function(i,o){
	var obj = $('.s-'+o['s']+'-e-'+o['e']);
	var cur_t = parseFloat(videoElement.currentTime.toString());
		if (o['s'] < cur_t && o['e'] > cur_t) {
			if (!$(obj).hasClass('active')) {
				$(obj).addClass('active');
			}
		} else {
			if ($(obj).hasClass('active')) {
				$(obj).removeClass('active');
			}
		}
		vid = videoElement.currentTime;
	});
}, 1500);
/*Функция для перехода к времени видео по клику*/
$('.to_video').click(function() {
   videoElement.currentTime = $(this).data('start');
});