Brightcove Live Captioning: Event Page Setup for captions delivered to 3Play iFrame or Javascript embed

Follow the steps below to set up the live event's webpage, after scheduling the event in both Brightcove and 3Play Media...

Step 1 - Log in to Brightcove

Log in to Brightcove and navigate to the Live module.

Screen_Shot_2021-11-11_at_11.48.43_AM.png

 

Step 2 - Configure the Brightcove Live Player

Within the Brightcove Live module, click the scheduled live event to get to the Control Room. Next, take the following steps:

  • On the left-hand side of the page, click Publish and Embed
  • Scroll down to Live Player Options
  • Select a Player from the Available Players drop-down menu
  • Check the box Allow DVR, if the player that was selected supports DVR mode and Create Cloud DVR was selected when scheduling the Brightcove event
  • Under Sizing select Responsive

Screen_Shot_2021-11-11_at_4.55.32_PM.png

3Play Media's Live Captioning JavaScript embed code can retain the sync to the media when the live stream playhead is moved back for up to 3 minutes.

 

Step 3 - Copy Brightcove Live Player Advanced Embed Code

Toggle to the Advanced embed code tab.
Copy the Advanced Embed Code and paste it into the HTML page for the event.

Screen_Shot_2021-11-11_at_3.01.13_PM.png

 

The code will look similar to the example below:

<div style="position: relative; display: block; max-width: 100%;">
<div style="padding-top: 56.25%;"><video
data-account="00000000"
data-player="abcdefg12345"
data-embed="default"
data-application-id=""
data-video-id="000000000"
data-ad-config-id="live.NV2mC655Ui4_4Egu63DzdkfSln8OmuJvMmA_52Xg"
class="video-js"
controls
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"
></video>
<script src="//players.brightcove.net/000/abcdef_default/index.min.js"></script>
</div>
</div>

 

Step 4 - Navigate to 3Play's Live Captioning Module

Sign in to 3Play Media and click Live Captioning in the top navigation bar. 

Screen_Shot_2021-11-11_at_10.34.53_AM.png

 

Step 5 - Copy the 3Play Live Captioning JavaScript Embed Code

First, click on the name of the scheduled Live Captioning Event to open the Live Captioning Details page. Next, locate the embed code section on the right-hand side of the page and toggle to the JavaScript embed code. Then, copy the JavaScript embed code.

Screen_Shot_2021-11-11_at_4.45.17_PM.png

Paste the JavaScript embed code below into the Brightcove Live Player Advanced embed code in the HTML. The HTML page now will look similar to this:

<div style="position: relative; display: block; max-width: 100%;">
<div style="padding-top: 56.25%;"><video-js
data-account="00000000"
data-player="abcdefg12345"
data-embed="default"
data-application-id=""
data-video-id="000000000"
data-ad-config-id="live.NV2mC655Ui4_4Egu63DzdkfSln8OmuJvMmA_52Xg"
class="video-js"
controls
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"
></video-js>
<script src="//players.brightcove.net/000/abcdef_default/index.min.js"></script>
</div>
</div>

<script src='//p3.3playmedia.com/live-asr-client/js/main.js'></script>
<div id='live-asr-target' data-key='12345bvdef' data-time='1557855057'></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>

 

Brightcove Live DVR mode & the 3Play Media Live Caption Embed Codes

The JavaScript embed supports Brightcove's DVR Live functionality in that the viewer can rewind the live stream and the captions will remain in sync. The video playhead should be moved back no more than 3 minutes. If the playhead is jogged back more than 3 minutes from the real-time signal, the captions will lose sync. 

If the Brightcove player being used for the live stream supports DVR mode but 3Play's iframe Live Captioning embed is selected, the video playhead can be dragged back however the captions will always be based on the real-time stream. 

Step 7 - Add id="bcPlayer" to the Brightcove Advanced Embed Code

Add id="bcPlayer" after <video-js in the Brightcove Advanced Embed code. The code should now look similar to this:

<div style="position: relative; display: block; max-width: 100%;">
<div style="padding-top: 56.25%;"><video-js id="bcPlayer"
data-account="00000000"
data-player="abcdefg12345"
data-embed="default"
data-application-id=""
data-video-id="000000000"
data-ad-config-id="live.NV2mC655Ui4_4Egu63DzdkfSln8OmuJvMmA_52Xg"
class="video-js"
controls
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"
></video-js>
<script src="//players.brightcove.net/000/abcdef_default/index.min.js"></script>
</div>
</div>

<script src='//p3.3playmedia.com/live-asr-client/js/main.js'></script>
<div id='live-asr-target' data-key='12345bvdef' data-time='1557855057'></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>

Step 8 - Publish the HTML 

After adding id="bcPlayer" to the HTML, save the code and publish the HTML page.

Next Steps...

Start Streaming Brightcove Live Event with Captions 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk