Brightcove Live Auto Captioning: Event Page Setup

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.

Step 2- Configure the Brightcove Live Player

Within the Brightcove Live module, click the scheduled live event to get to the Control Room.

On the left-hand side of the page click Player Configuration located under Publish and Embed and scroll down to Live Player Options.

Select a Player from the Available Players drop-down menu.

If the player that was selected supports DVR mode and Create Cloud DVR was selected when scheduling the Brightcove event, check the box Allow DVR.

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

Under Sizing select Responsive.

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.

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- Log in to 3Play Media

Log in to the 3Play Media account system.

Step 5- Navigate to Live Auto Captioning Module

Navigate to the Live Auto Captioning module within your 3Play Media project.

Step 6- Copy the 3Play Live Auto Captioning JavaScript Embed Code

Click the scheduled Live Auto Captioning file. 
Locate the embed code section on the right-hand side of the page and toggle to the JavaScript embed code.

Copy the JavaScript embed code.

Paste the JavaScript embed code below 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
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>

<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 Auto 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 Auto 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 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 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>
<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 Auto Captions 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk