Multilingual Subtitles on Video Player

This Hands on Chapter will reference setting up Translation in other chapter, setting up a video content type with CCK, and complete the equation by setting up a node with a video player which can be translated to other languages to create a multilingual Video player.

The aim is to get subtitle files to display over a video using JW player, and to be able to add translations so that the same video can be viewed with subtitle files of different languages. Thanks to Ben from anarcho.tv for help on how to do this.

Required modules

Contemplate http://drupal.org/project/contemplate
JW player (installed on server)
Content Translation (CORE)
Locale (CORE)
Internationiazion - http://drupal.org/project/i18n
CCK

Create Content Type

You need set up a content type with 2 CCK fields one for the Video (which could be text or Embfield Media Field) - and another for Subtitle files (text). There are a few different possiblities for how to do this. You could set up a simple text field, in this way you could paste in the URL of the files. This would be useful if you were linking to external videos to save bandwidth for example. Although it's harder to set up the system to do it for the subtitle files.

In this example we'll set up a content type with video file and subtitle files uploaded via the CCK file field module.

To do this first create a new content type. Navigate to Administer » Content management » Content types /admin/content/types/add

Then enter the following data.

subtitles_drupal_1

Then we'll add field for the video file
subtitles_drupal_2

On the following screen you can leave it unchanged and press submit, we don't need to do anything special here. The size of the text field only needs to be as long as the URL.

Then add a field for the subtitle file.
subtitles_drupal_3

Again the following page where you set the defaults doesn't need to be changed.

Your settings should look something like this.

subtitles2_drupal_1

Changing content template for the Content type

There are various ways this can be done we are going to use the Contemplate module as it's a quick way of doing it. You might want to build your own template files as a long term solution. It'll acheive the same ends.

Got the the Administer menu and click on Content > Content Templates

Next to the content type you created click create template.

Select the Body and input the variables coming in from the video and subtitle fields you created. You do this by finding a suiteable reference in the variable box, and clicking on the link (the name of the variable) and this imports the variable into the body box. See below examples.

Next you need to incorporate these variable in a Player. We are using the JW player, you can use this code as a template.

<script type="text/javascript">
var sa = new SWFObject('/sites/all/modules/swftools/shared/flash_media_player/player-viral.swf
','mpl','470','300','9');
sa.addParam("allowfullscreen","true");
sa.addParam("allowscriptaccess","always");
sa.addParam("seamlesstabbing","true");
sa.addParam("flashvars","file=/upload/corrie.flv&captions.file=/upload/corrie.xml&plugins=captions-1,audiodescription-1");
sa.write('video');
</script>

There are many different ways to do this. For my example I used filefield module to upload the flv file and the srt files. You can then use the filepath of the file field you created. ''print $node->field_subtitlefile2[0]['filepath']'' in the Body of you Content Template set up. This is a working example of the content of a contemplate Body.

<div id="video-player" align="center"><object id="flashvideo"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="337"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="/sites/all/modules/swftools/shared/flash_media_player/player-viral.swf" />
<param name="wmode" value="window" />
<param name="allowfullscreen" value="true" />
<param name="FlashVars"
value="file=http://mule.clearerchannel.org/<?php print
$node->field_videosub2[0]['filepath'] ?>
&rotatetime=3&autostart=true&plugins=captions-1&captions.file=http://mule.clearerchannel.org/<?php
print $node->field_subtitlefile2[0]['filepath'] ?>" />
<param name="quality" value="high" />
<embed name="flashvideo" allowScriptAccess="always" src="..//sites/all/modules/swftools/shared/flash_media_player/player-viral.swf"
width="450" height="337" border="0" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="window"
allowfullscreen="true" quality="high"
flashvars="file=http://mule.clearerchannel.org/<?php print
$node->field_videosub2[0]['filepath'] ?>
&rotatetime=3&autostart=true&plugins=captions-1&captions.file=http://mule.clearerchannel.org/<?php
print $node->field_subtitlefile2[0]['filepath'] ?>" />
</object><br/></div>
<?php print $node->content['body']['#value'] ?>

Translating

There different aspects to doing translation for Drupal sites. What we need to do is to create a different version of the node for each language. Luckily in Drupal 6 there are good tools for this. To set up the content translation here's the process.

Install following modules

i18n
content translation

There is detailed help elsewhere for installing language support but here is a brief summary of some of the things you need to enable short form.

Change content type workflow settings

Once you have installed the following modules then make sure you change the following settings in your Content Type settings

Workflow settings > Enabled, with translation

subtitles_drupal_9

Add Languages

At the language page use the Add Lanuage tab to add the languages you need to your site
Administer » Site configuration >> Language /admin/settings/language

Your page might end up looking a bit like this

languages_drupal_1

On the Configure tab of the languages settings page you need to change the value in Language negotiation to ''Path prefix with language fallback''

languages_drupal_2

Adding a new Video and Subtitle data and choosing your language

To add the inicial video and subtitle file click on Add Content in your drupal menu - /node/add .

Select the Content type that has been set up to take Video and subtitle files. In this case it's named Video with subtitles

languages_drupal_7

Then in your upload form, in the relevant fields, add metadata, upload your video and subtitle files.

Make sure to select a language as well.

languages_drupal_3

Click on Save. You should see a page with your published video.

Notes: Your site may be set up in a different way, as if you have a link to the Video file (often in an flv format) then you could set up a simple text feed to link to that video file rather than uploading it.

File formats

Video: Your video file should be an flv for this installation to make it easy to stream.

Subtitle: Your subtitle file should be a in a time coded xml format, or a *.srt format also called SubRip.
The file format is a TT Timed Text format. If you need to be able to create this files you may need to use a conversion tool like Subtitle Horse.

You can use these files to test it if you need to. You will need to download the subtitle file and install it on your own site as the JW player will only play subtitle files which are on the same server as it.

http://subtitle-horse.org/files/pedro3.flv
http://subtitle-horse.org/files/example.xml

Now when you create your content you need to choose the language from the drop down list next to Language. If you don't do that then the Translate tab won't appear when you have submitted your content, and you won't be able to translate it easily.

Also there is the matter of permissions as well. You need to decide what user roles can edit these videos. You may want to set up a Translator role who are allowed to edit all the relevant CCK field you've created and to edit the Content type you've created for this video content type. You may want to look at help on permissions elsewhere.

Ideally if your permissions are set up correctly your logged in translators should see a tab to Wiew, Edit or Translate at the top of the content page.

languages_drupal_4

When clicking on Translate you'll see a list of languages and the option to translate languages that haven't been translated yet.

languages_drupal_5

When you click on Add Translation you go to a page where you can edit the new page that been created. Then you can remove the existing subtitle file and upload a new one of the appropriate language.

languages_drupal_6

Example: Site showing mulingual subtitle support working on Drupal

As part of Drupal_Transmission_Sprint_2009_uk#Subtitles_-_Documentation_and_the_future? the site below was set up to show multilungual subtitles in action

Subtitles in Drupal in Action: http://mule.clearerchannel.org/node/279

This page shows an example of using the contemplate module to take a link to a subtitle file and a video file (stored as cck fields in the node) and plug the information from these fields in JWPlayer

Using the Core Drupal Translation Module, copies of the original file links and info can then be made and then altered (alternative subtitles links, alternative video link with different audio dub, translated description) for each language selected by this module

There is some more information on TT subtitles and how they work with players here.
http://www.longtailvideo.com/support/tutorials/Making-Video-Accessible

your comment:

name :
comment :