Ooyala: Embed an Audio Description with the 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 interactive transcript 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>

 

Step 6- Log into your 3Play Media account

3Play Media login

Step 7- Create a Plugin Template

Navigate to Settings > Plugin Templates and click +Create Plugin TemplateSee more information on how to create a Plugin Templates.

> For Player select Ooyala from the drop down menu.
> For Plugin Type choose Audio Description 
> For Player ID use the Video Player ID from the Ooyala embed code. 
This will be ooyala_player_handle that was added to the Ooyala embed code in step 5.
Find out how to identify your video ID here.


After designing the plugin template click Save My Plugin.

Step 8- 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 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 8.

Click the box next to Include transcript in noscript tag for SEO, if you would like this to improve SEO.

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 Kaltura

Ooyala: Embed an Interactive Transcript with the 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 interactive transcript 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>

 

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 Interactive Transcript Plugin template. 
See more information on how to create a Plugin Template

For Player select Ooyala from the drop down menu.

Enter the Video Player ID from the Ooyala embed code. 
This will be ooyala_player_handle that was added to the Ooyala embed code in step 5.

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

See more information on the Interactive Transcript Plugin Settings.

Step 8- Select file

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

Click a File

Step 9- Click Publish Plugin

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

Click Publish Plugin

 

Step 10- Choose Plugin Type

Click on Interactive Transcript Plugin.

Select Interactive Transcript plugin

Click the box next to Include transcript in noscript tag for SEO, if you would like this to improve SEO.

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.

Copy interactive transcript embed code

 

Step 12- Paste the interactive transcript 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 interactive transcript plugin embed code should look like.  

 

<script src="http://static.3playmedia.com/p/projects/10013/files/78983/embed.js?plugin=transcript&settings=width:398,height:240,skin:frost,can_collapse:true,collapse_onload:true,can_print:true,scan_view:true&player_type=ooyala&player_id=ABCDEFGHIJKLMN_12345" type="text/javascript"></script> 

 

 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/000000/embed.js?plugin=transcript&settings=width:398,height:240,skin:frost,can_collapse:true,can_print:true,can_download:true&player_type=ooyala&player_id=ooyala_player_handle" type="text/javascript"></script>
</body>
</html>

 

Step 13- Publish your Ooyala player with the Audio Description 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