Thursday, December 04, 2008

SRT Subtitles with HTML5 video

j^, the author of many cool open video related projects (including the Theora transcoder ffmpeg2theora) has written a jQuery based library to extract and show subtitles while a <video> is being played.

The jquery.srt page has details and a demo. Embedding code looks like:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.srt.js"></script>

<video src="http://example.com/video.ogv" id="video" controls>
<div class="srt"
data-video="video"
data-srt="http://example.com/video.srt" />
SRT is a common subtitle format and with this solution you can easily add subtitles to your HTML 5 videos.

Categories: , ,

Labels:

7 Comments:

OpenID saoshyant said...

Neat.

ffmepg2theora already supports converting .srt to Ogg Kate, though. Still, it will come in handy for a few people.

2:58 AM  
Blogger jmdesp said...

@saoshyant : And does the Ogg support in Fx support Ogg Kate ?

I think it would be a very good idea to extend HTML5 Video to include handling of external subtitles. Including choice of language.

4:43 AM  
Blogger Chris Double said...

@jmdesp, there is an ogg accessibility mailing list where that sort of thing is being discussed if you're interested.

@saoshyant, as jmdesp said, there's no Ogg kate support in the browser. Plus external .srt support allows things like community uploading of subtitles for videos, etc without having to re-mux the video.

10:49 AM  
Blogger pd said...

Presumably data-* attributes are not valid XHTML 1.0 Strict though?

So we have to break one open standard (XHTML) to support this other (OGG) open standard?

Hooray!

Of course all validators run at load time and so we can write 'standards' compliant' pages and then modify them like buggery with non-compliant code added/edited via JavaScript!

La la la, another web designer off to the funny farm ... see you in a couple of decades when the web is more mature!

11:03 AM  
Blogger Chris Double said...

@pd, lots of things aren't valid XHTML 1.0 Strict. Presumably if you are using video you are validating against an HTML 5 parser, where both video and data- attribute are valid. See here for information on custom data attributes in the spec.

This SRT example isn't breaking XHTML at all, it's using HTML 5. It's also not using some Ogg defined standard, apart from the use of Theora video, it's using features from the HTML 5 spec.

11:24 AM  
Blogger pd said...

Hi Chris

As HTML 5 is not yet a standard (?) and will not likely be for a while, the best ratified standard developers can use is XHTML 1.0 Strict.

At the moment HTML5 validation is only supported by the W3C validator in 'experimental' mode. HTML5 is certainly not supported by invaluable validation extensions like HTML Validator.

Would it be possible to use the generic <link> tag instead of data-* attributes? Example:

<link rel="subtitles" type="text/srt" href="..." />

Re using <video>: at this point the only option to support video on the web is to break standards because of the disgusting <object> and <embed> disasters. This is the same story I was complaining about. It's effectively impossible to support standards based web sites yet the intelligentsia continually pound home the importance of the 'open web'.

This little black duck has just had enough of the hypocrisy/duality, that's all.

*sigh*

Web standards development should be taken over by governments and enforced by law. The process of industry based development has been a complete failure for over a decade.

12:15 PM  
Blogger Chris Double said...

@pd, I'd suggest you raise your suggestions on the various standard mailing lists. That's the best way of making sure that the standards achieve what you want.

12:27 PM  

Post a Comment

<< Home