This post provides details and code about how to create dynamically translating video captions based on the browser language. By implementing the details in this post you can create the following:
- A Web based solution that displays machine translated captions for your video
- A Web page that translates captions on the fly
- A Silverlight player that displays translated captions
- A custom Web helper for WebMatrix to make this solution easy to implement and modify.
In this post I’ll show how to create the Silverlight player and how to use the browser language (en = English, ja = Japanese, fr = French, etc.) and the Microsoft Translation API to translate the captions shown in the video player. The code creates a new xml file for each language (caption.ja.xml, captions.fr.xml, etc.) so that the translation for a specific language is only done once. This way, the Microsoft translator API doesn’t get called more than needed.
While I’ve been on the ASP.NET User Education team at Microsoft I have had the opportunity to work with more than just ASP.NET and Visual Studio tools. I’ve had the chance to work with all sorts of technologies, including Silverlight. Also, I’ve had the chance to create videos and work with Microsoft Translation services. So it occurred to me to create a method to translate the video captions to reach a bigger audience.
After researching a bit, I ended up using the following technologies to create dynamically translated video captions:
I used the Silverlight Media Framework 2.0 because it included support for a nice video player that supports captions and it supports the latest video caption file standard (.dfxp) – W3C’s Timed Text Markup Language (TTML) 1.0. This means I could point the player to a standard xml based caption file and easily display captions. Nice! The Microsoft Translator API gave me a number of ways to perform translations. Good examples too. I used Visual Studio 2010 because I like the debugging experience and it’s a great environment to create Silverlight apps. Web Matrix is a new tool my team is working on. I think the WebMatrix helpers are especially cool! Check out my other blog posts for more Web Matrix helpers. Also, Expression Encoder 4 supports the new captioning file type (.dfxp) that is also supported by the Silverlight Media Framework.
Okay, so how does it all work? Here’s how.
First, I created a Silverlight app in Visual Studio. I modified the MainPage.xaml file with the following XAML as follows:
Next, I add the following Silverlight Media Framework assembly references to my Silverlight project after installing the Silverlight Media Framework. The following image shows the references I added to the project:
Note: I added all the SMF assemblies to my proto-type. I could reduce this down to the assemblies needed for only captioning.
Then, I modified the code-behind file named App.xaml.cs so that the Application_Startup method could read parameters that are passed from a Web page to the Silverlight app (.xap). Here’s the Application_Startup method:
The parameters that I will pass from the Web page to the Siverlight .xap file include the video file that I want to play and the caption file that I want to show.
After that, I modified the code-behind (MainPage.xaml.cs) file so that I could read the passed in parameters and display the video and captions:
To test this in Visual Studio, I modified the existing page named CCtest001TestPage.aspx as follows:
I also added a video file called Walkthrough-DynamicDataScaffolding.wmv and a caption file name ExampleCaptions.xml to the ClientBin folder of the Web project. I used the ClientBin folder because this is where Visual Studio builds the Silverlight .xap file.
The caption file contained the following xml:
When you run the test page (CCtest001TestPage.aspx) in the browser, you’ll see the video and captions appear.
Great! Now let’s add in dynamic caption translation and make a WebMatrix helper.
In WebMatrix, I created a new project and added the files. The following image shows the added files:
Note: I must have changed the video file name, but you don’t need too.
Next, I added a class file named MediaPlayerCC.cs to the Web app and placed it in the App_Code folder.
In the MediaPlayerCC.cs file I added the following C# code:
The above code copies the caption file and translates the captions using the Microsoft Translator API. I added a lot of comments. I hope those are helpful.
Next, I modified the page.cshtml file to call the helper using the following code.
Here, I first determine the browser language, then call the helper. In the helper call, I specify the path to a Silverlight .xap file. Then, I specify the media file, the caption file and the new language based on the browser language setting. I set it up so the .xap file, the media file and the caption file all belong in the same folder. You must also include YOUR translator AppId, see Get Your AppID for more information. The width and height are optional.
And there it is, dynamically translated captions. You can use Microsoft Expression Coder to help create the caption file for the video. During my proto-typing process for this solution I saved the caption file as a .dfxp file and renamed it to .xml. I also added in special attributes to each caption line to support the SMF, as you can see in the above caption file.
By including dynamically translated captions you will be able to increase the traffic to your videos.
I hope you find this helpful!
— Erik Reitan
ASP.NET User Education
This posting is provided “AS IS” with no warranties, and confers no rights.