Publishing

Depending on how you created the subtitles - embedded in the video or as a separate .srt file - you have different options to publish it online with your video.

Hosting external subtitle files along with video on a web server

We will assume you have one or more subtitles (in SRT format) and the video itself.

HTML5 video tag and Javascript

You can offer a web preview of Theora video alongside a given .srt with the help of jquery.srt. 

Firstly, notice below that we will integrate JQuery, a popular GPL Javascript library (http://jquery.com/), and an example Javascript implementation of displaying subtitles in a webpage from a SRT file available at: http://v2v.cc/~j/jquery.srt/jquery.srt.js

A simple HTML document excerpt is shown below, which includes the modification to include the Javascript files and to reference to your subtitle file. Only one subtitle file can be referenced at a time, unless you start developing further with Javascript. 

It is a small script that can load an srt file and display it inside a div on your page, under the video or as an overlay.

<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>
</video>
<div class="srt"
     data-video="video"
     data-srt="http://example.com/video.srt" />

this example could look like this on your page.

 

For another example using subtitles in several languages, you can have a look at this demo from Mozilla http://people.mozilla.com/~prouget/demos/srt/index2.xhtml

Another example using multiple subtitles and providing an interface to select them can be found at http://www.annodex.net/~silvia/itext/.

Hosting video with embedded subtitles on a web server

If you have Ogg files with embedded subtitles and want to display those in the browser, you can use the video tag right now.  However, not all browsers support the video tag.  Cortado, a Java plugin that can play Theora videos, also has support for embedded subtitles, and it works in all browsers that have the Java installed.  You can get the latest version of Cortado from http://www.theora.org/cortado/

<applet code="com.fluendo.player.Cortado.class" archive="cortado.jar"
        width="512" height="288">
    <param name="url" value="video.ogv"/>
    <param name="kateLanguage" value="en">
</applet>

To use subtitles with Cortado. you pass it the url to the video with embedded subtitles and in the same way you pass a parameter for the subtitles track to use. The easiest way is to select the language you want via the kateLanguage parameter:

  <param name="kateLanguage" value="en">

It is also possible to change or disable the subtitle via Javascript. If you want to switch to French subtitles, you could set the kateLanguage option from your script by calling:

  document.applets[0].setParam("kateLanguage", "fr");