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.
dotsub 2.0 is up!
We are happy to announce that dotsub 2.0 is up and running.
You can check out the new and improved dotsub at http://dotsub.com/
Getting screen shots from dotSUB.
Getting screenshots for your movies is simple if you know the ID of the film.
Simply type in http://www.dotsub.com/media/665bd0d5-a9f4-4a07-9d9e-b31ba926ca78/p and the screenshot should appear in your browser.
This would also allow you to programatically create list views with the screenshots on your own website.
Methods for online video acquisition using Windows
There are two easy methods that can be used to save videos from the internet to your hard drive. Each method revolves around the use of a specific program. These programs are Firebug and FLV Grabber.
Note: The programs are available at http://getfirebug.com/ and http://www.flvgrabber.com/. FLV Grabber is easier to use than firebug. However, it only runs on a Windows operating system. On the other hand, firebug works on non-Windows operating systems.
How to acquire videos using FLV Grabber:
Step 1: Open FLV Grabber in your startup menu.
Step 2: Play the video you wish to download. Once it has started playing, copy the URL and paste it into FLV Grabber.
Step 3: Click on the “Grab it” button. FLV Grabber will now begin to download the file onto your computer.
Step 4:Once the video is downloaded, click the new button. The directory in which the file was saved will be opened. Once you have located your file, you will be able to upload it to other sites.
How to acquire videos using Firebug
Note: Firebug is a free extension for the Firefox web browser. Amongst other things, Firebug allows users to download videos from video sites. To acquire a video from a website using firebug, you must be using the Firefox web browser.
Step 1: Play the video you wish to download. Once the video has started, open firebug in the “tools” menu.
Step 2: In firebug, select the “net” menu tag
Step 3: Look for a file ending in “.flv”; this is the video file. *Disclaimer: On youtube, the .flv file in firebug is conveniently named “get video”. The name of the file changes when your mouse cursor is over it.*
Step 4: Right-click on the .flv file and select “copy location”
Step 5: Paste the URL in your Firefox search bar.
Step 6: A download will begin.
Step 7: Once the download is complete, single-click on the file to edit its name.
Step 8: Re-name the file so that it ends with “.flv”
Step 9: The file is now ready to be uploaded to other websites.
The dotSUB embed schema explained:
The DotSUB Flash player is available in 3 different sizes (soon to be 4), and each one can be embedded in your HTML with a simple line of code:
<iframe src="http://www.dotsub.com/media/c986a31f-3218-4e8e-ad14-9aab17bdb206/e/m" frameborder="0" width="420" height="347"></iframe>
The IFRAME code in this example references the medium sized player. You’ll notice at the end of the URL, there is a “/m” for “medium”. To change the size, you can simply change the “/m” to a “/l” for large, or an “/s” for the small player. If you change the URL in the IFRAME code, you’ll also need to change the height and width attributes to make sure the player fits inside the frame. The sizes are as follows:
Small : width="320" height="272"
Medium : width="420" height="347"
Large : width="480" height="392"
A default language can also be set in the embedded player by adding the 3 letter ISO language code to the end of the URL scheme. For exmaple, here is a reference to a small sized player with Spanish as the default language:
<iframe src="http://www.dotsub.com/media/c986a31f-3218-4e8e-ad14-9aab17bdb206/e/s/spa" frameborder="0" width="320" height="272"></iframe>
This will set language dropdown list in Player to Spanish, and the Spanish subtitles will start playing immediately, since the default behaviour of the player is to start playing when a language is selected from the drop down box.
If a language is not set in the URL, the player will pick up the default language from the browser. To over ride this behaviour and force the user to select a language by have the default item “Select Language…”, add “none” to the end of the URL as follows:
<iframe src="http://www.dotsub.com/media/c986a31f-3218-4e8e-ad14-9aab17bdb206/e/m/none" frameborder="0" width="420" height="347"></iframe>
We are working on a fourth player for large “cinematic” 16×9 widescreen films, and it may even be available by the time you read this post. You can check it by pointing your browser to
http://www.dotsub.com/media/c986a31f-3218-4e8e-ad14-9aab17bdb206/e/xw
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..