Brightcove Legacy: Embedding the Interactive Transcript with a Brightcove Player on a Webpage

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

Before you can embed your interactive transcript 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...

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 an interactive transcript 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 interactive transcript 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 the line of code (JavaScript file) 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> 

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 interactive transcript 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 dimensions (Height and Width) and select from the available plugin Settings.Enter Brightcove object ID for interactive transcript plugin

After designing the plugin template click Save My Plugin.

PRO TIP: If you want the video player and the interactive transcript 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 interactive transcript 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 Plugin Template from drop down menu

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 embed code for Brightcove

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