Me tope con un problema similar un tiempo, y empecé a utilizar esto.. pero al final el proyecto no salio, por lo que nunca exploré a fondo el uso del plugin... fijate
http://cuepoint.org/ http://videolearning.portafolioseduc...deos-en-html5/
En el ejemplo usa un script asi para colocar los subtitulos.. pero son manuales.. capas puedas lograr que sea dinámico, y no se leería un .srt
Código Javascript
:
Ver original<script src='js/cuepoint.js'></script>
<script>
$(document).ready(function(){
//Slides object with a time (integer) and a html string
var slides = {
0: "This is the first subtitle. You can put html in here if you like",
4: "A fluffy thing eating some grass.",
12: "Oh look it's a castle on a hill. Nice",
23: "Some horses",
34: "Wow look at those woolly sheep eating grass.",
40: "For more information on this plugin visit github/owainlewis or email [email protected]", 50: "Cuepoint.js is an open source plugin for adding subtitles and cue-points to your HTML5 video"
}
//Start cuepoint and pass in our the subtitles we want
cuepoint.init(slides);
//You can set your own skip to links by using the cuepoint.setTime(seconds) function
$('#1').click(function(){ cuepoint.setTime(40)});
$('#2').click(function(){ cuepoint.setTime(80)});
$('#3').click(function(){ cuepoint.setTime(60)});
$('#4').click(function(){ cuepoint.setTime(60)});
});
</script>
Código HTML:
Ver original<!-- Start Cuepoint -->
<video id='video' width="768" preload="auto" controls poster="images/poster.jpg"> <source src='http://cuepoint.org/dartmoor.mp4' /> <source src='http://cuepoint.org/dartmoor-mobile.mp4' /> <source src='http://cuepoint.org/dartmoor.webm' /> <source src='http://cuepoint.org/dartmoor.ogv' />
Cuestion de que mires un poco el código fuente del sitio original a ver como lo usa..