Live Captions Embed: Use, Customization and Latency Controls

 

Using the Live Captions Embed

The Live Auto Caption Embed will display captions produced during an active Live event, and is available for any Live captioned event, though not recommended for use with 608 encoded captions as the video stream will already contain captions for compatible players to display natively.

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.

 

mceclip0.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' src='//p3.3playmedia.com/live-asr-client/embed.html?key=123&stream_start=1607631300' frameborder=0 style='border: 0px; width: 100%;'></iframe>

src='//p3.3playmedia.com/live-asr-client/embed.html?key=123&stream_start=1607631300' is the generic URL for the embed code.

We can append param(s) to the above URL, in the form &param_name=param_value
Multiple params from the list below can be added to the URL.

Eg: src='//p3.3playmedia.com/live-asr-client/embed.html?key=123&stream_start=1607631300&use_uppercase=1&no_speech_interval=120'

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. Show complete captions
    Enable this option if you want to display the entire caption history (CART captioning), instead of individual caption frames. This will preserve the captions in the UI instead of replacing them for every new frame.
    NOTE: The caption history will only be visible from the time the user loads the event page.

    Default Value: disabled
    param_name: show_complete_transcript
    param_values:
    1. false to disable
    2. true to enable

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

    Default Value: 200
    param_name: container_height
    param_value: A valid positive integer (Eg: 500)

  4. 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).

    Default Value: 60
    param_name: no_speech_interval
    param_value: A valid positive integer (Eg: 120)

 

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/js/main.js'></script>
<div id='live-asr-target' data-key='123' data-time='1607631300'></div>
<div id='live-asr-message'></div>
<p>
<input type ='button' id='inc_delay' value='Increase Caption Latency' disabled='true'/></p>
<p>
<input type ='button' id='dec_delay' value='Decrease Caption Latency' disabled='true'/></p>

<div id='live-asr-target' data-key='123' data-time='1607631300'></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-target' data-key='123' data-time='1607631300' data-uppercase='1' data-no-speech-interval='120'></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. Show complete captions
    Enable this option if you want to display the entire caption history (CART captioning), instead of individual caption frames. This will preserve the captions in the UI instead of replacing them for every new frame.
    NOTE: The caption history will only be visible from the time the user loads the event page.

    Default Value: disabled
    param_name: data-show-complete-transcript
    param_values:
    1. false to disable
    2. true to enable

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

    Default Value: 200
    param_name: transcript-container-height
    param_value: A valid positive integer (Eg: 500)

  4. 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).

    Default Value: 60
    param_name: data-no-speech-interval
    param_value: A valid positive integer (Eg: 120)

 

Live Captions Embed (Javascript): Latency Controls

A delay between the 3Play Media Live Auto 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.

Increase Caption Latency

Click the Increase Caption Latency should the captions be ahead of the audio.

Decrease Caption Latency

Click the Decrease Caption Latency should the captions be behind the audio.

Recorded Example

The example below is a screen recording of a webpage with a Brightcove Live event with 3Play Media's Live Auto Captions. Notice how the caption "Wilderness is not a luxury" displays before it is spoken/heard.

Look in the bottom left-hand corner of the screen viewer clicks the Increase Caption Latency button and is able to adjust captions to better synchronize them to the live video stream.

During playback in the example below, do not hover your cursor over the video as the YouTube playhead blocks the buttons and live captions being demonstrated!

 

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk