video tag and subtitles
By Paul Rouget on Tuesday 10 March 2009, 18:30 - shared - Permalink
I've written a little Javascript code that lets you add .srt subtitles to the video tag.
Subtitles are displayed on top of the video element, in an html:div. A subtitle is HTML content. That means you can include links, images, or whatever you want inside the subtitles.
Here is a demo:
Notice that links are clickables :)
You can add anything you want on top of the video, like a <canvas/> element. If pixels in the canvas are transparent or semi-transparent, you will see the video behind it.
Be creative ;)
P.S: you need Firefox 3.1/3.5: http://www.mozilla.com/en-US/firefo....

Comments
Wow! That's amazing.
It sounds like we could create a gecko based video player with subtitles now!
This video with subtitles is obviously a FAKE. While the three subtitled languages are left-to-right, Paul's finger goes from right to left showing the subtitle area. I will not fall into a so obvious trap.
More seriously : wow... Congrats Paul... That's beautiful.
Think of a slideshow of pictures accompanying ogg audio with subtitles, suddenly you have a multilingual presentation :)
Would be cool if you could make your examples not depend on JS1.8, so they could work in Webkit :-)
Nice! Have you see this: http://v2v.cc/~j/jquery.srt/
That's another library for using srt with the video element.
@Robert O'Callahan : oops, fixed :)
The problem is not only the javascript1.8 attribute, there's something else. I haven't checked what yet. But it would be really cool if those demo could work in any engine supporting <video> .
@Rik I've just emailed you about video & webkit
I find the video and audio only play when running in the background while I'm viewing another tab, otherwise with Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090310 Minefield/3.2a1pre ID:20090310044308 the video does not advance. I get several security errors:
Security Error: Content at http://www.mozbox.org/pub/srt/index... may not load or link to chrome://global/skin/scrollbars.css.
Security Error: Content at http://www.mozbox.org/pub/srt/index... may not load or link to resource://gre/res/html.css.
and occasionally:
Error: Permission denied for <http://www.mozbox.org> to call method XULElement.QueryInterface on <http://www.mozbox.org>.
It's great to see more javascript libraries emerge that are providing subtitles/captions. However, I really think there should be a standard way of attaching subtitles to the <video> tag, so not every developer has to create their own. There are some recent discussions between Xiph, Mozilla, Opera, and Chrome about how to do this - check out http://blog.gingertech.net/2008/12/... and http://lists.whatwg.org/pipermail/w... to get an idea where things are going.
So why don't the subtitles work in Safari?
The video works fine, of course, but the subtitles are very hit & miss.
A mashup for collaboratively subtitling videos would be nice ...
bonjour je n'arrive pas à afficher les sous titre j'ai bien recupérer le fichier main.js ainsi que video_subtitles.js g un fichier .srt
mais rien la vidéo marche mais pas de sous titre!!
pourriez vous m'aider svp
@Quan007:
2 règles:
* pas de sms
* dire ce qui ne fonctionne pas (les erreurs JS)
Autant pour moi Paul...
Alors tout d'abord, il n'y a pas d'erreur JS. Je pense que c'est les fichiers .srt qu'ils ne sont pas au bonne endroit...
j'ai renommé le fichier srt en " fr.srt ou en.srt.." , j'ai mis les fichierssrt dans un répertoire du nom "srt"...
mais rien à faire je n'affiche toujours pas les sous titres...
Bonjour,
faut-il obligatoirement que le nom de la page soit une extension xhtml???
J'ai trouver pourquoi les sous titres ne s'affichaient pas, cela était du à l'extension xhtml... je mettai html..
mais que faut il faire pour que ça marche en mettant .html??
faut il modifier le fichier main.js ou video_sibtitles.js??
merci
Just tested it with some subtitles from http://www.subs.to and It is working flawlessly, I must say damn good work. Thank you.
I really think there should be a standard way of attaching subtitles