Customizing Your Live Captions Embed

3Play offers a webpage to provide directly to your audience which renders the live transcript and new captions produced during your live event. 

 

 

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 Caption 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 Live Event Details page within your 3Play account.

 

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=0FGZmhAQto8MbCgm&show_complete_transcript=false&stream_start=1667065500&use_uppercase=0' frameborder=0 style='border: 0px; width: 100%;'></iframe>
src='https://p3.3playmedia.com/live-asr-client-v1/embed.html?key=0FGZmhAQto8MbCgm&show_complete_transcript=false&stream_start=1667065500&use_uppercase=0 is the generic URL for the embed code.

Parameters can be appended to the above URL to adjust the display of captions within the embed &param_name=param_value.

 

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 parameters are available to customize the presentation of captions on the External Webpage. 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.

 

Example

src='https://p3.3playmedia.com/live-asr-client-v1/embed.html?key=0FGZmhAQto8MbCgm&show_complete_transcript=false&stream_start=1667065500&use_uppercase=0

 

NOTE: Not appending any parameters from the list below will result in the External Webpage using the default value specified. The param_values below note values that are supported by 3Play; only the values listed below are supported.

 

 

Uppercase Captions
By default, captions for live events are uppercase. If this param is deactivated, captions will be displayed in sentence case, e.g. &use_uppercase=0.

Default Value:active
param_name:use_uppercase
param_values:

    • 0 to deactivate
    • 1 to activate

 

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

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

 

 

Show complete transcript
Use this parameter 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 can be used together with the line_count parameter, and a scroll bar will automatically appear to display the previous captions.


Default Value: deactivated
param_name:show_complete_transcript
param_values:

    • false to deactivate
    • true to activate

 

Accessibility Menu (available as of May 2023) 
The Accessibility menu will let your audience customize the way captions display on the External Webpage URL, including adjusting: font size, font family, and both font & background page color. The menu is displayed by default; to remove the Accessibility Menu, remove the  "&show_accessibility_menu=true" parameter from the URL prior to sharing with your audience.  


Default Value: activated
param_name:show_accessibility_menu=true
param_values:

    • false to deactivate
    • true to activate

 

Font Family

Update the font family to one of the options below; by default Arial is used. Note, the browser will replace the space, 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

Update the font size to one of the options below; by default 14 is used, e.g. &font_size=14px.

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

    • 14px up to 50px

 

Font Color

Update the font color to one of the options below; by default black is used, e.g. &font_color=black.

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 #66069A
purple #66069A
pink #E82D8C
grey #D8D7D8
tan #E6D8C7

 

 

Background Color

Update the background color to one of the options below; by default white is used, e.g. &background_color=white.

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 #66069A
purple #66069A
pink #E82D8C
grey #D8D7D8
tan #E6D8C7

 

 

 

 

Live Captions Embed: Customization Options (Javascript)

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

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='0FGZmhAQto8MbCgm' data-time='1667065500' data-uppercase='0'></div>

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

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


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

Eg:
<div id='live-asr-client' data-key='0FGZmhAQto8MbCgm' data-time='1667065500' data-uppercase='0'></div>

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

Available Params:

Uppercase Captions
By default, captions for live events are all uppercase. If this param is disabled, captions will be displayed in sentence case.

Default Value: activated
param_name: data-uppercase
param_values:

    • 0 to activate
    • 1 to deactivate

Specify number of caption lines that are displayed
By default, 2 lines of options will be displayed. This parameter can be any number greater than

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

 

Show complete transcript
Enable this option if you want to display the entire caption history (CART captioning). This will allow your audience to access all captions from the event instead of replacing them with the most recent captions.  This can be used together with the line_count param, and a scroll bar will automatically appear to display the previous captions.

Default Value: deactivated
param_name: data-show-complete-transcript
param_values:

    • false to deactivate
    • true to activate

Show Accessibility Menu (available as of 5/4/23) 
The Accessibility Menu will allow your audience to customize the way their captions display on the External Webpage URL - they will have the ability to modify font size, font family, and both font & background page color. As of 5/4/23, the menu will be available to be added to your embed code, but will not be enabled by default. To add the Accessibility Menu to your embed, simply add "show_accessibility_menu=true" to the URL prior to sharing with your audience.  


Default Value: deactivated
param_name:show_accessibility_menu
param_values:

    • false to deactivate
    • true to activate

 

 

 

 

 

Deprecated as of 11/14/22

Live Captions Embed (Javascript): Latency Controls

A delay between the 3Play Media Live Captions and Brightcove Live video stream may be observed during the event. Typically when this has been observed, it is that the captions have displayed ahead of the video. The latency between captions and video may vary for each individual's viewing experience. The Live Captions Embed Javascript version offers controls for the viewer to adjust latency as desired.

 

Transcript Container Height

If the "show complete captions" param is enabled, this param can be used to determine the height of the box (in pixels) containing the entire caption history. This area is scrollable and will auto-scroll to the latest captions whenever they are added on the screen.

No Speech Interval

The captions can be configured to insert a [NO SPEECH DETECTED] frame on the UI if no speech is detected for a specified amount of time (in seconds).

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk