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. 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
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.
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.
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.
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...
0 Comments