Publishing Translated Video

We will explore some examples of hand maintained video distribution techniques. That is, methods where we will be doing each necessary step manually. The overall goal is to host our video online on a web server, and publish the subtitles if they are separate.

Hosting 'burnt-in' subtitled video on a web server

We will assume you have burnt in your subtitles onto the video itself, and have a FTP account on a web server you can host files and web pages. We aim to publish our subtitled video on the web to allow anyone to download it, and to give them a HTML preview page in their web browser, and a link to download the video. To do this will take a few steps.

Convert your video to the Ogg Theora video codec.
You should start by exporting your video to Ogg Theora, from whatever video editor you have been using. If you already have an exported video file, but not in Ogg Theora codec, then you may like to refer to the manual for ffmpeg2theora at FLOSS Manuals :
http://en.flossmanuals.net/FFmpeg2Theora/Introduction
ffmpeg2theora is a conversion utility for transcoding from various video codecs to Ogg Theora.

The TheoraCookbook may also give you some ideas and hints on working with Theora video:
http://en.flossmanuals.net/TheoraCookbook/Introduction
Transfering your video with File Transfer Protocol (FTP) to a web hosting server.
Assuming you have your username and password at the ready, its time to transfer your video file to the web server. If you need to help getting started with installing an FTP client, and using one , please refer to the FireFox manual on FLOSSManuals, specifically the section on using FireFTP - a FireFox plugin :
http://en.flossmanuals.net/Firefox/FireFtp
The end result of the this step should be a URL you can use for referring to your publicly accessible video, as hosted on your web server. You can give this URL out to people so that they can download your video.
Construct a simple HTML web page for previewing your video.
To enable a web preview of Theora video you can use at least two methods. One is to use Cortado, a Java applet embedded in a web page, which will allow web browsers to display the video in a web page. Read more about this method in the Theora Cookbook:
http://en.flossmanuals.net/TheoraCookbook/Cortado
The second method is to use the latest HTML5 standard's <video> tag, which for Theora video is supported by Firefox 3.5, and Safari 4 with the Xiph QT components :
http://www.xiph.org/quicktime/

You can see the required HTML page to create on your web server in the Theora Cookbook here :
http://en.flossmanuals.net/TheoraCookbook/HTML5

A simple HTML document is shown below, which includes the <video> tag. You should use the URL you obtained at the end of Step 2, in place of the example URL http://my-server.org/video.ogm
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>My Video Test</title></head>
<body>
<video src="../http://my-server.org/video.ogm" width="480" height="320" autoplay="autoplay" controls="controls">
Sorry, your browser does not support the video tag. Try using Firefox 3.5+
</video></body>
</html>
```

You can see a real example here :
http://andycat.engagemedia.org/videotranslation/example1.html

You should inspect the HTML source of that webpage to see the reference to a real Theora video, in this case a link to a EngageMedia.org hosted video.

Hosting external subtitle files along with video on a web server

We will assume you have not burnt in your subtitles onto the video itself, ie you have possibly multiple subtitle files (in SRT format) as well as your video and have a FTP account on a web server you can host files and web pages. We aim to publish our subtitled video on the web to allow anyone to download it, and to give them a HTML preview page in their web browser, and a link to download the video. To do this will take a few steps.

Convert your video to the Ogg Theora video codec.
You should start by exporting your video to Ogg Theora, from whatever video editor you have been using. If you already have an exported video file, but not in Ogg Theora codec, then you may like to refer to the manual for ffmpeg2theora at FLOSS Manuals - http://en.flossmanuals.net/FFmpeg2Theora/Introduction
ffmpeg2theora is a conversion utility for transcoding from various video codecs to Ogg Theora.

The Theora Cookbook may also give you some ideas and hints on working with Theora video: http://en.flossmanuals.net/TheoraCookbook/Introduction
Transfering your video with File Transfer Protocol (FTP) to a web hosting server.Assuming you have your username and password at the ready, its time to transfer your video file and your subtitle files to the web server. If you need to help getting started with installing an FTP client, and using one , please refer to the FireFox manual on FLOSS Manuals, specifically the section on using FireFTP - a FireFox plugin :
http://en.flossmanuals.net/Firefox/FireFtp
The end result of the this step should be URLs you can use for referring to your publicly accessible video and subtitle files, as hosted on your web server. You can give these URLs out to people so that they can download your video and/or subtitles.
Construct a simple HTML web page for previewing your video
To enable a web preview of Theora video you can use at least two methods. One is to use Cortado, however, Cortado cannot currently show subtitles.

The second method is to use the latest HTML5 standard's <video> tag, which for Theora video is supported by Firefox 3.5, and Safari 4 with the Xiph QT components :
http://www.xiph.org/quicktime/ along with prototype Javascript technologies to display the subtitles in sync with the video.

You can see the required HTML page to create on your web server in the Theora Cookbook here :
http://en.flossmanuals.net/TheoraCookbook/HTML5

A simple HTML document is shown below, which includes the <video> tag. You should use the URL you obtained at the end of Step 2, in place of the example URL http://my-server.org/video.ogm
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>My Video Test</title></head>
<body>
<video src="../http://my-server.org/video.ogm" width="480" height="320" autoplay="autoplay" controls="controls">
Sorry, your browser does not support the video tag. Try using Firefox 3.5+
</video></body>
</html>
```
HTML5 video tag and SRT file format technologies

We can now modify the above HTML page that includes the video tag, to include our SRT files dynamically, ⁞⁞ showing as the video plays.

Firstly, notice below that we will integrate JQuery - a GPL Javascript library available (http://jquery.com/) and an example Javascript implementation of using displaying subtitles in a webpage from a SRT file available at :

http://v2v.cc/~j/jquery.srt/jquery.srt.jsA simple HTML document 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. To customise this for your video and subtitle, you should use the URLs you obtained at the end of Step 2, in place of the example URL http://my-server.org/video.ogm and http://my-server.org/video.srt
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>My Video Test</title>
<script type="text/javascript" src="../http://v2v.cc/~j/jquery.srt/jquery.js"></script>
<script type="text/javascript" src="../http://v2v.cc/~j/jquery.srt/jquery.srt.js"></script>
</head>
<body>
<video id="video" src="../http://my-server.org/video.ogm" width="480" height="320" autoplay="autoplay" controls="controls">
 Sorry, your browser does not support the video tag. Try using Firefox 3.5+
 </video>
<div class="srt" data-video="video" data-srt="http://my-server.org/video.srt"> subtitle content </div>
</body>
</html>
```
You can see a real example here :
http://andycat.engagemedia.org/videotranslation/example2.html

You should inspect the HTML source of that webpage to see the reference to a real Theora video, and a real SRT file.

The original example of playing a SubRip (.srt) subtitle, along side a Ogg Theora video, using the HTML5 video tag can be seen at :
http://v2v.cc/~j/jquery.srt/

To research further into emerging open standards for video on the web in HTML5, see the mailing list of whatwg, specifically a thread around captions for web video:

http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-February/018600.html

http://wiki.whatwg.org/wiki/Video_accessibility