DFXP (now TTML) Format for Closed Captions

All closed caption files that you upload to Backlot must be in the DFXP format.

Supported Formats

Note: DFXP (now TTML) is used as a familiar term for closed caption formats. However, the specification is now called TTML.

Ooyala only supports the DFXP v2006 format. More information about the DFXP format that Ooyala supports can be found in the official DFXP site at http://www.w3.org/TR/2006/WD-ttaf1-dfxp-20060427/.

Default Styling Properties

For the Flash player, the following styling properties from the DFXP file will be used as default (if specified in the DFXP closed caption file). Ooyala only supports the DFXP v2006 format.
  • Language
  • Text alignment
  • Text background color (tts:backgroundColor)
    Note: Text background only displays by default when it is paired with tts:showBackground="always"
  • Text color (tts:color)
  • Font size (tts:fontSize)
  • Font family (tts:fontFamily)
  • Font style (tts:fontStyle)
  • Font weight (tts:fontWeight)
  • Opacity i.e. applicable to text box background or window background (tts:opacity)
Note: For Text Direction (tts:direction), Flash automatically adjusts text direction based on the language.

Supported DFXP Tags

Ooyala supports all tags from the 2006 DFXP standard, listed below. Other tags are not supported.

Tag Example Additional Information
color tts:color="green" Ooyala only supports this in the top level tag that wraps all other captions.
fontSize tts:fontSize="18"  
textOutline textOutline="green 2px 0px" textOutlien applies at the paragraph level only, not in subtags.
fontFamily tts:fontFamily="serif" fontFamily only supports fonts installed by the end-user or generic fonts.
textAlign tts:textAlign="right" textAlign only re-aligns within the closed caption box. This does not move the box.
fontStyle tts:fontStyle="italic" Oblique style is not supported.
fontWeight tts:fontWeight="bold"  
lineHeight tts:lineHeight="32"  
opacity tts:opacity="0.50" opacity sets opacity of the background bounding box color.

How DFXP Settings Apply

On a browser without any cached settings, when a player and asset are loaded with DFXP settings, all attributes as marked in the list above will be applied with default settings provided in the DFXP file. Once the end user modifies the CC settings through the UI interface, DFXP settings will be overridden for all settings and replaced with player defaults and user preferences. The Flash player defaults are described in the table below.

DFXP Styling Property Default Flash Player Setting Additional Information
Language first available  
Text alignment center Valid values: left | center | right
Text background color (tts:background) none  
Text color (tts:color) white  
Font size (tts:fontSize) 14px Value should be in px
Font family (tts:fontFamily) sansSerif Only supports Generic Family Name
Font style (tts:fontStyle) normal Valid values: normal | italic
Font weight (tts:fontWeight) normal Valid values: normal | bold
Opacity i.e. applicable to text background or window background (tts:opacity) 0.7 Valid values: 0-1.

User preferences are saved in Flash storage so the settings are available for a user for that specific device until Flash storage is cleared. This is a one time setting that can be saved across any assets played on the Ooyala Flash player.

DFXP (now TTML) Example

The following is an example of a DFXP (now TTML) file with seven captions in English (xml:lang="en") and one caption in French (xml:lang="fr").

Note: On the first line or in the appropriate <div>s, be sure to change the value of the xml:lang attribute to match your target language; for example, change en to de for German.
<?xml version="1.0" encoding= "UTF-8" ?>
<tt xml:lang="en" xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
  <styling>
    <style xml:id= "defaultCaption"
      tts:fontSize= "12"
      tts:fontFamily= "sansSerif"
      tts:fontWeight= "normal"
      tts:fontStyle= "normal"
      tts:color= "white"
      tts:backgroundColor= "black"
      tts:showBackground= "always"
      tts:textAlign= "left"
    />

    <style xml:id= "styleTwo"
      tts:fontFamily= "serif"
      tts:color= "blue"
    />

    <style xml:id= "styleThree"
      tts:color= "black"
      tts:backgroundColor= "white"
      tts:fontStyle= "italic"
    />

    <style xml:id= "styleFour" style= "styleTwo"
      tts:textOutline= "red 2px 0px"
    />

    <style xml:id= "styleFive" style= "styleTwo"
      tts:color= "red"
      tts:fontWeight= "bold"
    />

  </styling>
</head>
<body xml:id= "thebody">
  <div style= "defaultCaption" xml:lang= "en">
    <p begin= "0:00:00.00" end= "0:00:04.00">This is my 1st caption</p>
    <p begin= "0:00:05.00" end= "0:00:09.00" style= "styleTwo">This is my 2nd caption</p>
    <p begin= "0:00:10.00" end= "0:00:14.00" style= "styleThree">This is my 3rd caption</p>
    <p begin= "0:00:15.00" end= "0:00:19.00" style= "styleFour">This is my 4th caption</p>
    <p begin= "0:00:20.00" end= "0:00:24.00">This is my 5th caption
      <span style= "styleFive">This is a sub-caption</span>
    </p>
    <p begin= "0:00:25.00" end= "0:00:29.00">This is my 6th caption</p>
    <p begin= "0:00:25.00" end= "0:00:29.00" style= "styleTwo">This is my 7th caption</p>
  </div>
  <div style= "defaultCaption" xml:lang= "fr">
    <p begin= "0:00:00.00" end= "0:00:34.00">Bonjour</p>
  </div>
</body>
</tt>    

Closed Caption Validator

We are also providing a Ooyala Closed Captions Validator to check your DFXP/TTML documents for your convenience. However, please note that we provide Ooyala-specific DFXP support. Even if you follow the w3c document definition for DFXP/TTML it may not be supported. If you run into any issues with your DFXP/TTML files check with your Account Manager or Technical Support.

Was this article helpful?