Brightcove Legacy: Embedding the Captions Plugin with a Brightcove Player on a Webpage

Content Publishing must be enabled in your 3Play Media account.
See more information on enabling content publishing in your 3Play account.

Before you can embed your captions plugin with your Brightcove player on your webpage, you must enable your intended player's JavaScript API.  

See more information on enabling the JavaScript API in your Brightcove player.

Follow the steps below to get started.

Alternatively, we offer a stripped-down version of this article that highlights the key steps and modifications for creating an interactive plugin with a Brightcove player

Step 1- Log into Brightcove

"Brightcove 

Step 2- Select your video

Click on the Media tab located at the top of the page. Select the video you want to create a captions plugin for.

Brightcove Media Tab

Step 3- Copy the publishing code

To the right of your list of videos, click the arrows to expand the Quick Video Publish menu. Under Select a player, select the Brightcove player with the  JavaScript API you recently enabled. Under the Copy Publishing Code, make sure Website is selected. Click on the Copy to Clipboard button to the right of the code field.

Copy Brightcove publishing code

 

Step 4- Paste the Brightcove code

Open the page of HTML where you want to embed the captions plugin and Brightcove player.  If the video is already embedded in the page, skip to step 6.  Paste the publishing code from your clipboard into the HTML.

The code, at this point, should look similar to the following except for the object idplayerID, and playerKey as they will be unique to the video selected by you.  

<!-- Start of Brightcove Player -->

<div style="display:none">

</div>

<!--
By use of this code snippet, I agree to the Brightcove Publisher T and C 
found at https://accounts.brightcove.com/en/terms-and-conditions/. 
-->

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<object id="myExperience1111111111111" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="500" />
<param name="height" value="470" />
<param name="playerID" value="1111111111111" />
<param name="playerKey" value="AQ~~,AAAAB0NHX1E~,9dHwYzsAbroCqz12ChgV7TuvNxfnGxR-" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />

<param name="@videoPlayer" value="1476760484001" />
</object>

<!-- 
This script tag will cause the Brightcove Players defined above it to be created as soon
as the line is read by the browser. If you wish to have the player instantiated only after
the rest of the HTML is processed and the page load is complete, remove the line.
-->
<script type="text/javascript">brightcove.createExperiences();</script>

<!-- End of Brightcove Player -->

PRO TIP: Note the unique object id associated with the video's embed code as you will need this when creating a Plugin Template specific for this video. The Brightcove object ID begins with myExperience followed by a string on numbers.
Here is an example of a Brightcove object ID: myExperience1111111111111 
 

Step 5- Adjust the <script> code

Locate this line of code at the beginning of the Brightcove embed code:

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

 

Add _all between /BrightcoveExperiences and .js so the code now looks like this:

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences_all.js"></script>

Note: If you intend to use the Overlay option for the captions plugin, add the following line of code to the video embed code:

 <param name="wmode" value="opaque">

Some video embed codes may already contain this parameter, so if you see it, just adjust the value so it looks like the example above.

Keep this HTML page open and open a new web browser page.

Step 6- Log into your 3Play Media account

transcription closed captioning translation account 3Play Media login

Step 7- Create a Plugin Template

Navigate to Settings > Plugin Templates and create a new captions plugin template. 
See more information on how to create a Plugin Template

For Player select Brightcove from the drop down menu.
In the Player ID field enter the Brightcove object ID that begins with myExperience.

Select Skin, set the Width and select from the available plugin Settings.

Captions plugin template

After designing the plugin template click Save My Plugin.

PRO TIP: If you want the video player and the captions plugin to match in width, change the plugin template's width to match the width of the Brightcove player! If you change the width of the Brightcove player to match the plugin, the aspect ratio of your video will likely be distorted

Below highlights where to locate the Brightcove object/player ID in the Brightcove video embed code.

Brightcove embed code

Step 8- Select file

From the My Files page in your 3Play Media project click on the name of the file associated with your Brightcove video.

Select transcript that correlates to Brigthcove video

Step 9- Click Publish Plugin

Click the Publish Plugin button located above your list of files.

Click Publish Plugin

Step 10- Select a Plugin Template

Click Select Your Plugin and from the drop down menu that appears select the plugin template created in step 7.

Select captions plugin template

Step 11- Copy the Plugin embed code

After selecting a plugin template copy the plugin embed code that appears within the Publish Plugin pop-up menu.

Interactive transcript captions plugin embed code

Step 12- Paste the plugin embed code

Go back to your HTML code. 
Paste the 3Play plugin embed code below the video embed code in the <body> of your HTML.
It should now look similar to the HTML below

<html>
<head>
</head>

<body>

<!-- Start of Brightcove Player -->

<div style="display:none">

</div>

<!--
By use of this code snippet, I agree to the Brightcove Publisher T and C 
found at https://accounts.brightcove.com/en/terms-and-conditions/
-->

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences_all.js"></sc...>

<object id="myExperience1111111111111" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="500" />
<param name="height" value="470" />
<param name="playerID" value="1111111111111" />
<param name="playerKey" value="AQ~~,AAAAB0NHX1E~,9dHwYzsAbroCqz12ChgV7TuvNxfnGxR-" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />

<param name="@videoPlayer" value="1476760484001" />
</object>

<!-- 
This script tag will cause the Brightcove Players defined above it to be created as soon
as the line is read by the browser. If you wish to have the player instantiated only after
the rest of the HTML is processed and the page load is complete, remove the line.
-->
<script type="text/javascript">brightcove.createExperiences();</script>

<!-- End of Brightcove Player -->

<!-- Start of 3Play Media Plugin Embed Code -->

<script type="text/javascript" src="//static.3playmedia.com/p/projects/000/files/0000/plugins/00000.js"></script>

<!-- End of 3Play Media Plugin Embed Code --> 

</body>
</html>

Step 13- Publish the HTML page 

Save the HTML document and publish it!  Enjoy!

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk