Popcorn.js - это библиотека JavaScript с открытым исходным кодом, предназначенная для программирования богатых интерактивных возможностей с использованием HTML5-видео и аудио-элементов, и предоставляет очень простой API для «отображения различного контекстно-зависимого контента во время воспроизведения видео на веб-сайте".
Взгляните на демонстрационную галерею здесь: http://popcornjs.org/demos
Вот учебник, созданный с помощью Popcorn.js, который показывает, как создать простую программу Popcorn.js: http://popcornjs.org/popcorn-101
Документы можно найти здесь: http://popcornjs.org/api (это все еще выполняется)
В следующем примере используется плагин Popcorn Footnote для отображения простого сообщения под видео.в определенное время во время воспроизведения:
<!DOCTYPE html>
<html>
<head>
<title>Popcorn Simple Example</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
$(document).bind( "ready", function(){
// Create a popcporn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#video");
// add a footnote at 2 seconds
pop.footnote({
start: 2,
end: 6,
text: "This footnote is the stepping stone of progress!",
target: "footnote-container"
});
// play the video right away
pop.play();
});
</script>
</head>
<body>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
<div id="footnote-container"></div>
</body>
</html>
Рабочий пример здесь: http://jsfiddle.net/rwaldron/6PEU8/
Недавняя демонстрация показывает, как вы можете использовать аудио элемент в качестве контроллера слайд-шоу, здесь: http://jsfiddle.net/rwaldron/DjmLM/