Supported Closed Caption DFXP (now TTML) Format

Closed caption files that you upload to Backlot must be in a supported format. The DFXP format (now TTML) is a popular supported format.

Note: Ooyala supports other closed caption formats. For details, see Supported Closed Captions.

Note: The Ooyala Web Player utilizes WebVTT. If a TTML file is uploaded, the Ooyala Player will utilize a WebVTT file that is converted from the TTML file, which will remove styling.

Supported DFXP Format

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

Among the DFXP formats, Ooyala supports only the DFXP v2006 format. For more information about the DFXP format that Ooyala supports, go to the official DFXP site at http://www.w3.org/TR/2006/WD-ttaf1-dfxp-20060427/.

Note: Playback on Ooyala mobile apps (apps developed using the Ooyala iOS and Android SDKs) requires the TTML (formerly DFXP) format. Player V4 Web supports additional closed-caption formats across all browser environments, including browsers on iOS and Android devices.

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"`	Applies at the paragraph level only, not in subtags.
`fontFamily`	`tts:fontFamily="serif"`	Supports fonts installed only by the end-user or generic fonts.
`textAlign`	`tts:textAlign="right"`	Re-aligns within the closed caption box only. 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"`	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 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 might not be supported. If you run into any issues with your DFXP/TTML files, check with your Ooyala representative or Technical Support.

Was this article helpful?

LEAVE FEEDBACK

Rate this article: