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);
}
}
Dotsub 2 Beta is Up!
Dotsub 2.0 Beta is finally up. There are still some minor issues to work out, and our new design is being fine tuned as well. All the old accounts and content from version 1.0 will be moved over on June 9. Until then, you can safely start to create new content on either versions of the site.
The public facing video site is powered by dotSUB’s new Localization Content Management System, powered by Spring, Hibernate, PostgreSQL, Glassfish, and Solaris.
Notable New Features:
- Real time interactive captioning interface (Ajax driven)
- Ability to select 1 of 9 screenshots automatically generated from the film.
- Email alerts.
- Film upload progress bar.
- Fine grained security and permission settings.
- Automatic translation using Google Translate
- Full Screen support in video player.
- Much more..