Skip to main content

Customizing Your Live Captions Embed

Updated

Prerequisites

  • You must have an event scheduled for live captioning
  • This service is not available to Express customers

Steps to Customize your Live Captions Embed

Using the Live Captions Embed

Note: The embed code snippet must be added to a web page prior to an event and requires web page development access.

The Live Captions Embed will display captions produced during an active live event and is available for any live captioned event.

  • Two versions of the embed are available with each scheduled live event, an iFrame version and a Javascript version.
  • To use either iFrame or Javascript, copy the embed code for your event and add it to your live event page to present captions alongside or overlaying your live player.

The embed codes are available on the the bottom right-hand side of the Event Details page for your event.

3Play_Media___Account___Live_Captioning_-_27389.png 

Live Captions Embed: Customization Options (iFrame)

Embed codes generated for live events can be customized by adding parameters to the URL.

Example of an iFrame embed code for a live event (HTML):

<iframe class='tpm-live-asr-embed' id='live-asr-embed-30474' src='https://p3.3playmedia.com/live-asr-client-v1/embed.html?key=IEChcdKCcc_oo535&show_complete_transcript=false&use_uppercase=0' frameborder=0 style='border: 0px; width: 100%;'></iframe>

https://p3.3playmedia.com/live-asr-client-v1/embed.html?key=IEChcdKCcc_oo535&show_complete_transcript=false&use_uppercase=0 is the source URL for the above embed code. 

  • As with the 3Play External Webpage, parameters can be appended to the URL in the embed to adjust the display of captions in the form: &param_name=param_value

The following customization parameters are available for iFrame embeds. Multiple parameters from the list below can be added to the URL by appending the ampersand after the previous parameter value, e.g. &param_name1=param_value1&param_name2=param_value2.
 

Note: The param_values below note values that are supported by 3Play; only the values listed below are supported.

Uppercase Captions
Live event captions default to uppercase, but 3Play adds &use_uppercase=0 so captions display in sentence case. For uppercase captions, remove this parameter.

Default Value: active
param_name: use_uppercase
param_values:

  • 0 to deactivate
  • 1 to activate

Caption Lines
By default, 2 lines of captions will be displayed. This parameter can be modified to any integer greater than 0, e.g. &line_count=3.

Default Value:2
param_name: line_count
param_values: 1-[any integer]

Show complete transcript
Set this parameter to true if you want to display the entire caption history (CART captioning), e.g. &show_complete_transcript=true. This allows your audience to access all captions from the event instead of replacing them with the most recent captions. This is more commonly used with the 3Play External Webpage.

Default Value: deactivated
param_name: show_complete_transcript
param_values:

  • false to deactivate
  • true to activate

Accessibility Menu
The Accessibility menu lets your audience customize how captions display on the External Webpage URL. They can adjust font size, font family, font and background color, and display mode (standard or full screen/presentation mode, which removes the page margins). The menu is off by default for iFrame embeds; to add it, change the &show_accessibility_menu=false parameter to true.

Default Value: deactivated
param_name: show_accessibility_menu
param_values:

  • false to deactivate
  • true to activate

Font Family

The font family may be updated to any of the families below. By default, Arial is used.
Note: The browser will replace the space(s) in the font family name, e.g. &font_family=tahoma,%20sans-serif.

Default Value: arial, sans-serif
param_name: font_family=<value>
param_values:

  • arial, sans-serif
  • comic sans ms, comic sans, cursive
  • courier new, courier, monospace
  • georgia, serif
  • tahoma, sans-serif
  • times new roman, serif
  • trebuchet ms, sans-serif
  • verdana, sans-serif

Font Size

The recommended font sizes are between 14px and 50px. By default, 14 is used, e.g. &font_size=14.

Default Value: 14
param_name: font_size=<value>
param_values:

  • 14 up to 50 (recommended size range)

Font Color

The font color may be updated to one of the options below. By default, black is used, e.g. &font_color=black. 
Hex color codes are provided for reference.

Default Value: black
param_name: font_color=<param_value>

param_value Hex color
white #FFFFFF
black #000000
red #EC0B0B
darkred #850303
orange #FF7D0C
yellow #FFE50C
green #05C121
darkgreen #047114
darkblue #040E71
purple #66069A
pink #E82D8C
grey #D8D7D8
tan #E6D8C7

Background Color

The background color may be updated to one of the options below. By default, white is used, e.g. &background_color=white.
Hex color codes are provided for reference.

Default Value: white
param_name: background_color=<param_value>

param_value Hex color
white #FFFFFF
black #000000
red #EC0B0B
darkred #850303
orange #FF7D0C
yellow #FFE50C
green #05C121
darkgreen #047114
darkblue #040E71
purple #66069A
pink #E82D8C
grey #D8D7D8
tan #E6D8C7

Live Captions Embed: Customization Options (Javascript)

Example of an Javascript embed code for a live event (HTML):

<script src='//p3.3playmedia.com/live-asr-client-v1/embed.js' type='module'></script><div id='live-asr-client' data-key='IEChcdKCcc_oo535' data-time='1667065500' data-uppercase='0'></div>

<div id='live-asr-client' data-key='IEChcdKCcc_oo535' data-time='1667065500' data-uppercase='0'></div> is the generic div tag for the embed code.

We can add attribute(s) to the above tag in the form data-param-name='param-value'

Multiple attributes from the list below can be added to the tag.

Note: Not adding any attributes from the list below will result in the code falling back to the default value specified

Uppercase Captions
Live event captions default to uppercase, but 3Play adds data-uppercase='0' so captions display in sentence case. For uppercase captions, remove this parameter.

Default Value: activated
param_name: data-uppercase
param_values:

  • 0 to activate
  • 1 to deactivate

Caption Lines
By default, 2 lines of captions will be displayed. This parameter can be modified to any integer greater than 0, e.g. data-line-count='3'.

Default Value: 2
param_name: data-line-count
param_values: 1-[any integer]

Show Accessibility Menu
The Accessibility menu lets your audience customize how captions display on the External Webpage URL. They can adjust font size, font family, font and background color, and display mode (standard or full screen/presentation mode, which removes the page margins). The menu is off by default for Javascript embeds; to add it, add the data-show-accessibility-menu='true' parameter.

Default Value: deactivated
param_name: data-show-accessibility-menu
param_values:

  • false to deactivate
  • true to activate

Related articles