Ooyala: Embed the Captions Plugin with an Ooyala Player on Your Webpage

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

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 an Ooyala player.

 

Step 1- Log into your Ooyala Backlot account

Ooyala Backlot login

 

Step 2- Navigate to the Manage page

Click on the Manage tab on the top of the page.

Ooyala Manage page

 

Step 3- Copy the HTML Embed Code

Select the video you want to create the captions plugin for and click on the Embed tab.
Select the HTML Embed Code and click Copy to save the embed code to your clipboard.

Ooyala video embed code copy

 

Step 4- Paste the HTML embed code

Open your HTML editor and paste the video embed code into an HTML document.  It will look similar to this:

<script src='http://player.ooyala.com/v3/ABCDefg123456HIJkl87654'></script><div id='ooyalaplayer' style='width:1920px;height:1080px'></div><script>OO.ready(function() { OO.Player.create('ooyalaplayer', 'ABCDefg123456HIJkl87654'); });</script><noscript><div>Please enable Javascript to watch this video</div></noscript>

 

Step 5- Modify the HTML embed code

Within the Ooyala HTML embed code add:

window["ooyala_player_handle"] =

after:

(function() {

 

 Once modified, the embed code should look similar to example below:

<script src='http://player.ooyala.com/v3/ABCDefg123456HIJkl87654'></script><div id='ooyalaplayer' style='width:1920px;height:1080px'></div><script>OO.ready(function() { window["ooyala_player_handle"] = OO.Player.create('ooyalaplayer', 'ABCDefg123456HIJkl87654'); });</script><noscript><div>Please enable Javascript to watch this video</div></noscript>

 

If you intend to use the Captions Overlay function, add a parameter that sets the wmode to transparent.   

<param name="wmode" value="transparent" />

 

Step 6- Log into your 3Play Media 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 Ooyala from the drop down menu.
In the Player ID field enter the Ooyala ID that begins with ooyala_player_handle.

This will be ooyala_player_handle that was added to the Ooyala embed code in step 5.

 

Select Skin, set dimensions (Height and Width) and select from the available plugin Settings

Create 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 Ooyala player! If you change the width of the Ooyala player to match the plugin, the aspect ratio of your video will likely be distorted.

See more information on the Captions Plugin Settings.

Step 9- Select file

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

Select File

Step 10- Click Publish Plugin

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

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 your Captions Plugin template

Step 12- Copy the Plugin embed code

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

Copy Captions Plugin Embed Code

See more information on the Captions Plugin Settings.

 

Step 14- Paste the captions plugin embed code into your HTML

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

Below is an example of what the captions plugin embed code should look like.   

<script src="http://static.3playmedia.com/p/projects/10013/files/78983/embed.js?plugin=captions&settings=width:398,skin:dark,overlay:true,minimize_onload:true,searchbar:true&player_type=ooyala&player_id=ABCDEFGHIJKLMN_12345" type="text/javascript"></script>

REMEMBER THAT YOUR VIDEO'S PLAYER ID MAY BE DIFFERENT FROM THE ONE IN THE EXAMPLE ABOVE! 

Formatting Tip:  If you aren't using the OVERLAY function and want the video player and the captions plugin to match in width, change the captions plugin's width to match the width of the Ooyala player! If you change the width of the Ooyala player to match the captions plugin, the aspect ratio of your video will likely be distorted. 

 

The code should now look similar to this:

<html>
<head>
</head>
<body>

<script src='http://player.ooyala.com/v3/ABCDefg123456HIJkl87654'></script><div id='ooyalaplayer' style='width:1920px;height:1080px'></div><script>OO.ready(function() { window["ooyala_player_handle"] = OO.Player.create('ooyalaplayer', 'ABCDefg123456HIJkl87654'); });</script><noscript><div>Please enable Javascript to watch this video</div></noscript>

<script src="http://static.3playmedia.com/p/projects/999/files/219953/embed.js?plugin=captions&settings=width:398,skin:dark,minimize_onload:true,searchbar:true&player_type=ooyala&player_id=ooyala_player_handle" type="text/javascript"></script>

</body>
</html>

 

Step 15- Publish your Ooyala player with the captions plugin

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