Integrating dotSUB
In order for content to reach a truly global audience, it should be localized. For video content, dotSUB is the fastest and easiest way to accomplish this goal. DotSUB is a popular destination site for subtitled content, but it also contains a content management system geared specifically for timed content and quality control of translations, and a collaboration environment allows for the possibility of crowd sourcing translations at a lower cost.
Once a transcript has been produced in the desired language(s), the content can be distributed to multiple destinations. Some of the possibilities include mobile video, DVD, and web based transcripts. By far the most common distribution method today, however, is web based video using Flash (.flv or H264).
There are numerous ways to integrate dotSUB into your existing website or Flash video player, so the first step is deciding what type of integration scenario is best suited to your requirements.
- You have a website, and require to post only a few videos on your site.
- You are using a free or open source video Flash video player.
- You have an extensive video library, and have already built your own video to serve the content.
- You are using a video hosting and delivery platform, like Brightcove, or Longtail Video
While other scenarios are possible, these four are the most common. Let’s quickly examine each one to get a general idea of how dotSUB can be integrated.
1. You have a website, and require to post only a few videos on your site.
In this case, your solution is simply to embed your video using the typical IFRAME html notation found on most video sites. With this option, you can control options, like the size of the player, and what the default language should be. For more information, see THE DOTSUB EMBED SCHEMA EXPLAINED
Example:
2. You are using a free or open source video Flash video player.
If you wish to use another player that is able to display standard caption formats, you can export the appropriate format from dotSUB and call the subtitles from your local file system. Several players, such as the JW FLV Media Player, or the standard players packaged with Flash 8 or Flash CS3 have the capability to display files using the Timed Text format.
It is also possible to integrate the subtitles into your own player, but the effort required usually makes this option practical only for scenario 3:
3. You have an extensive video library, and have already built your own video to serve the content.
With an enterprise account, your will gain access to our Project Management tool, our Restful API, and our Flash API for integration into third party players. For an experienced Flash programmer, integration can be completed in a matter of days. For more information, see Furthermore, all video files and metadate can be accessed programatically from any language, such as PHP, .NET, Ruby on Rails, and Java through our RESTful API. For more information, and example of fully integrated custom players, see INTEGRATING DOTSUB INTO A FLASH VIDEO PLAYER. To get started with this option, please contact Ed Zad in our corporate sales department.
4. You are using a video hosting and delivery platform, like Brightcove, or Longtail Video
Dotsub has built plugins for popular commercial platforms like Brightcove.
For more information, and to request a demo, please contact Ed Zad.
Integrating dotSUB into a Flash video player
Adding dotSUB subtitles to a Flash video player is a simple process that can be accomplished with only cursory knowledge of Actionscript.
(NOTE: This post describes the process in dotSUB 1.0. Version 2.0 will have a much simpler approach, and use Flash Cue Points instead of onEnterFrame to trigger the right subtitles at the right time. Stay tuned for more info soon.)
You can check out a few “dotSUBbed” players here:
Global Oneness Project Flash video player
Arcelor Mittal TV Flash video player
Similar integrations can be accomplished in 1-2 days of Flash development, depending on experience.
Step 1: Upload your video, caption it, and translate it.
You’ll need to upload your video so you can caption it and translate it. If your language skills are lacking, you can assign permission to another user to translate the video, or you can use Google Translate to perform an automatic translation if your language of choice is available.
Once your video has been uploaded, make note of the film id available in the video metadata section.
Step 2: Add language specific visual elements to your player
Now that you have some localized video content, you can start adding visual elements to the player. Add a ComboBox component to your video player, or create some type of widget that can hold the list of languages from the dotsub server.
You’ll also need a TextArea to hold the subtitles, and some type of visible link to dotsub for to user to participate dotsub in further translation for the video.
Step 3: Get the list of available language and video information from dotsub.com
To populate ComboBox with a list of languages, use LoadVars to get a list of the languages available for the specific film id, for example:
film_info_lv.load("http://dotsub.com/api/filminfo.php?filmid=" + 402);
Once the data is received, you can process it into a list, and get other necessary variables, like the URL for the screenshot, etc.
film_info_lv.onLoad = function(success) {
if(success)
{
/* you may or may not need these optional vars */
flash_url = this.flash_url;
length = this.film_length;
/* link to the screen shot */
sshot_url = this.sshot_url;
numb_languages = this.numblanguages;
for(i=0; i < numb_languages; i++)
{
langcode_array[i].langcode = this['langcode'+i];
langname_array[i].langname = this['langname'+i];
lang_cb.addItem({label:this['langname'+i], data:this['langcode'+i]});
}
}
/* Sorting the list is optional */
lang_cb.sortItemsBy(”label”, “ASC”);
/* init the combo box with a drop down value */
lang_cb.addItemAt(0, {data:0, label:”SELECT LANGUAGE”});
/* select the default */
lang_cb.selectedIndex = 0;
/* set the height of the popup */
if (numb_languages < 10) {
lang_cb.rowCount = numb_languages -3;
} else {
lang_cb.rowCount = 10;
}
}
Step 4: The language selection event loads and displays the subtitles.
After completing Step 3, you should now see the languages appearing in your ComboBox. Selecting your language of choice should now trigger a request for the subtitles from dotsub.com, and get parsed into a form that be triggered as timed events. Here is the code:
var start_array = new Array();
var stop_array = new Array();
var line_array = new Array();
subtitles_lv.onLoad = function(success)
{
if(success)
{
numb_lines = this.numblines;
for(i=0; i < numb_lines; i++)
{
start_array[i] = this['start'+i];
stop_array[i] = this['stop'+i];
line_array[i] = this['line'+i];
}
}
}
/* So now you have a start_array, an end_array, and a line_array.
Now it’s just a question of showing the right element at the right time. */
function checkCaptions() {
for(i=0; i
{
if(ns.time >= start_array[i] &&
ns.time < stop_array[i] && line_array[i].length > 0)
{
/* hide the screen if there is no subtitle */
var subtitle_segment_txt = line_array[i].toString();
if (subtitle_segment_txt.length < 2) {
break;
} else {
caption_mc._visible =true;
caption_mc.caption_txt.text = subtitle_segment_txt;
if ((Stage["displayState"]==”fullScreen”)) {
fullscreenCaptions_mc._visible = true;
fullscreenCaptions_mc.caption_txt.text = subtitle_segment_txt;
}
break;
}
}
caption_mc._visible =false;
fullscreenCaptions_mc._visible = false;
}
};
/* listener for language drop down box. */
var langcbListener:Object = new Object();
/* Assign function to Listener Object. */
langcbListener.change = function(event_obj:Object) {
selected_language = event_obj.target.selectedItem.data;
changeSubtitles( );
};
/* add the listener to drop down list */
lang_cb.addEventListener(”change”, langcbListener);
function changeSubtitles() {
if (selected_language == ‘none’) {
} else {
_root.subtitles_lv.load(”http://dotsub.com/api/subtitles.php?filmid=” + filmid + “&language=” + _root.selected_language);
}
}