Brightcove: Embed the Captions Plugin with a Brightcove Video on a Webpage

Before embedding the captions plugin on your webpage Content Publishing must first be enabled in your 3Play Media account.

See information on how to enable Content Publishing in your 3Play account

IMPORTANT: In step 8 setting up your plugin template NOT select Brightcove for the Player as this is for the Brightcove Legacy player! For Player you must select Video.js!

Follow the steps below to get started...

Step 1- Log into Brightcove Videocloud

Brightcove Videocloud login

Step 2- Select your video

Click on the Media tab located at the top of the page.

Brightcove Media Tab

From the Media page click the video that you want to embed on a webpage along with a 3Play Media plugin.

Select Brightcove video to embed with 3Play Media interactive transcript

Step 3- Switch to the Advanced embed code

Click Publish located in the upper right-hand corner of the Media page.

Publish from Brightcove Videocloud

Scroll down the Publishing window and toggle to the Advanced embed code.

Brightcove Videocloud advanced embed code

 

Step 4- Player Size > Fixed

After toggling to the Advanced tab, by default Fixed is selected for Sizing.
Keep the Sizing set to Fixed and enter the desired values for Aspect Ratio and Player Width and Height.

Do not select Responsive under Sizing as the 3Play Media plugin will not scale along with a responsive embed code.

Advanced Brightcove video embed code with fixed sizing 

Step 5- Copy and paste the Advanced (Fixed) embed code

Once toggling to the Advanced embed code and ensuring that it is set to a Fixed size, copy the code and paste it into an HTML page.

The code should look similar to the example below...

<video data-video-id="000000001"
data-account="100000000"
data-player="default"
data-embed="default"
class="video-js"
controls
style="width: 720px; height: 480px;"></video>
<script src="//players.brightcove.net/100000000/default_default/index.min.js"></script>

 

Step 6- Modify the video embed code

In order to have the video player communicate with the plugin, an object ID will need to be defined and added to the Brightcove video embed code. The ID you define can be any string of text.

Below is an example of an Advanced (Fixed) Brightcove embed code that is modified to include an ID. 
Note the id="magic" in bold manually added after <video....

<video id="magic" data-video-id="000000001"
data-account="100000000"
data-player="default"
data-embed="default"
class="video-js"
controls
style="width: 720px; height: 480px;"></video>
<script src="//players.brightcove.net/100000000/default_default/index.min.js"></script>

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

Step 7- Log into your 3Play Media account

Navigate to https://account.3playmedia.com/user/sessions/new and sign into your 3Play Media account.

3Play Media transcription, closed captioning, translation services log in 

Step 8- Create a Plugin Template

Navigate to Settings > Plugin Templates and create a new captions plugin template. 

For Player select Video.js from the drop down menu.

IMPORTANT: DO NOT SELECT Brightcove as this is for the Brightcove Legacy player! For player you must select Video.js!
In the Player ID field enter the ID that was added to the Brightcove embed code in step 6
Make sure that the text string entered in the Player ID field matches exactly what was added earlier to the video embed code.

In step 6 id="magic" was manually added to the Advanced (Fixed) Brightcove video embed code therefore, when creating a plugin template for that video embed, magic is what must be entered into the Player ID field for it's plugin template.


3Play Media captions plugin template

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

After designing the plugin template click Save My Plugin.

PRO TIP: If you want the video player and the 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 

Step 9- Select file

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

Select transcript that correlates to Brigthcove video

Step 10- Click Publish Plugin

Click the Publish Plugin button located above the transcript. Click Publish Plugin

Step 11- Select a Plugin Template

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

Select the captions plugin

Step 12- Copy the Plugin embed code

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

interactive transcript embed code for Brightcove

Step 13- 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>

<video id="magic" data-video-id="000000001"
data-account="100000000"
data-player="default"
data-embed="default"
class="video-js"
controls
style="width: 720px; height: 480px;"></video>
<script src="//players.brightcove.net/100000000/default_default/index.min.js"></script>

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

</body>
</html>

Step 14- 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