This blog is for demoing how to add closed caption for video by using Microsoft Media Platform Player Framework (MMPPF). MMPPF supports both Plain text and Timed Text closed caption.
This sample is build with Windows 8 RTM and Player framework preview 5, using Visual Studio 2012 RTM.
1. Open Visual studio 2012, Select File -> New -> Project…, Choose under JavaScript -> Blank App.
2. In Solution Explorer, right click on Reference folder, and select Add Reference…
You need to add Microsoft Media Platform:Player Framework and Microsoft Media Platform: Player Framework Timed Text Plugin. For this sample, I will be using a .Mp4 source file for progressive download. If you are having a Smooth Streaming video source, you will need to add plugin Microsoft Media Platform: Player Framework Adaptive Streaming.
Player framework uses Plugin Architecture. You only need to install the reference library when you needed.
3. Add two TTML files into the project. Here I have a subtitle file in English and one in Spanish. Please download here.
4. Double click on default.html and we need to add library reference to use those plugins. After app reference and please add the following code:
|
1 2 3 4 5 6 7 8 9 10 |
<!-- App10 references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> <!-- PlayerFramework references --> <link href="/Microsoft.PlayerFramework.Js/css/PlayerFramework.css" rel="stylesheet"> <script src="/Microsoft.PlayerFramework.Js/js/PlayerFramework.js"></script> <link href="/Microsoft.PlayerFramework.Js.TimedText/css/PlayerFramework.TimedText.css" rel="stylesheet"> <script src="/Microsoft.PlayerFramework.Js.TimedText/js/PlayerFramework.TimedText.js"></script> |
5. Now add TTML closed caption and video src as properties through data-win-options for JavaScript control.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<body> <div data-win-control="PlayerFramework.MediaPlayer" data-win-options="{ width: 640, height: 360, autoplay: true, isCaptionsVisible: true, src: 'http://smf.blob.core.windows.net/samples/videos/RealPCPride.mp4', tracks: [ { kind: 'captions', label: 'English captions', src: '/timedtext-captions.en.xml', srclang: 'en', default: true }, { kind: 'captions', label: 'Spanish captions', src: '/timedtext-captions.es.xml', srclang: 'es' } ] }"></div> </body> |
6. If you take a look at the sample TTML file, for instance, timedtext-captions.es.xml. It has styling support. You could define styling in <Styling> tag, define each region with styling and assign each caption into different region. Here is fragment of TTML file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<styling> <style xml:id="style1" tts:textShadow="none" tts:padding="3px 5px" /> <style xml:id="style2" style="style1" tts:color="#fff" tts:backgroundColor="rgba(0, 0, 0, 0.65)" /> <style xml:id="style3" style="style1" tts:color="#000" tts:backgroundColor="rgba(255, 255, 255, 0.65)" /> </styling> <layout> <region xml:id="region1" style="style2" /> </layout> </head> <body> <div region="region1"> <p xml:id="caption1" ttm:role="caption" begin="00:00:00:27" end="00:00:02:22">Sean: Hello.<br/>I’m a PC,</p> ...... |
7. Now you could press F5 and enjoy a sample .mp4 video with both English and Spanish closed caption. You could see these two video have different subtitle styling.
You could download this project here.
Microsoft Media Platform Player Framework is an opensource project, led by Tim Greenfield.
4 Responses to Microsoft Media Platform Player Framework for windows 8 – closed caption support
Huy Tran October 5, 2012
Hi Ming,
I did it, but can’t see the caption area below the video. I built it by VS2012 RTM and Windows 8 RTM.
eran October 31, 2012
Hi,
I Updated the last version of the Player Framework for Windows 8 (Preview 7)
and suddenly it does not appear any more in my video player…
It was and dissapear afther the update…