Live Captions Embed: Use & Customization

Avatar
David Zylber
Follow

 

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 params 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.

 

The following parameters are available with which the embed display can be customized. Note that multiple params from the list below can be added to the URL.

Eg: 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 embed code falling back to the default value specified

 

Available Params:

  1. 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: enabled
    param_name: use_uppercase
    param_values:
    1. 0 to disable
    2. 1 to enable

  2. 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
    1. Default Value: 2
      param_name: line_count
      param_values: 1-[any integer]
  3. 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: disabled
    param_name: show_complete_transcript
    param_values:
    1. false to disable
    2. true to enable
  4. 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: disabled
    param_name:show_accessibility_menu
    param_values:
    1. false to disable
    2. true to enable
  5. (Deprecated as of 11/14/22) 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.

  6. (Deprecated as of 11/14/22) 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).

 

Live Captions Embed: Customization Options (Javascript)

Embed codes generated for live events can be customized by adding params 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:

  1. 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: enabled
    param_name: data-uppercase
    param_values:
    1. 0 to disable
    2. 1 to enable

  2. 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
    1. Default Value: 2
      param_name: data-line-count
      param_values: 1-[any integer]
  3. 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: disabled
    param_name: data-show-complete-transcript
    param_values:
    1. false to disable
    2. true to enable

  4. 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: disabled
    param_name:show_accessibility_menu
    param_values:
    1. false to disable
    2. true to enable
  5. (Deprecated as of 11/14/22) 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.

  6. (Deprecated as of 11/14/22) 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).

 

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.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk