Ooyala: Embed an Audio Description Plugin with the Ooyala V4 Player on Your Web Page

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.

 

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 V4 HTML5 Embed Code

Select the video you want to add the audio description plugin to and click on the Embed tab. 
Under Custom Player, select a V4 Player. Choose the V4 HTML5 Player Embed Code (Advanced) 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:


<html>
<head>
</head>
<body>
<script src="//player.ooyala.com/static/v4/production/core.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/bit_wrapper.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/main_html5.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/osmf_flash.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/akamaiHD_flash.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/youtube.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/skin-plugin/html5-skin.min.js"></script>
<link rel="stylesheet" href="//player.ooyala.com/static/v4/production/skin-plugin/html5-skin.min.css"/>
<div id='container' style='width:640px;height:360px;'></div>
<script>
var playerParam = {
'pcode':'gzYWo6WjQb-ME6DXK-evfOpU10JK',
'playerBrandingId':'44693ff5de064e928afd456dabdba24f',
'autoplay':false,
'loop':false
};
OO.ready(function() {window["ooyala_player_handle"] = OO.Player.create('container', 'U2cWYyYzE66_o4HL03_OrKwOh7yv_lAI', playerParam);});
</script>
</body>
</html>

Step 5- Modify the HTML embed code

Within the Ooyala HTML embed code add:

window["ooyala_player_handle"] =

 after:

(function() {

 

 Once modified, that line should look like this:

 OO.ready(function() {window["ooyala_player_handle"] = OO.Player.create('container', 'U2cWYyYzE66_o4HL03_OrKwOh7yv_lAI', playerParam);});
 

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 Template.

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

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

 

Step 12- Paste the audio description 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 audio description plugin embed code should look like:

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

 

 The code should now look similar to this:

<html>
<head>
</head>
<body>
<script src="//player.ooyala.com/static/v4/production/core.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/bit_wrapper.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/main_html5.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/osmf_flash.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/akamaiHD_flash.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/video-plugin/youtube.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/skin-plugin/html5-skin.min.js"></script>
<link rel="stylesheet" href="//player.ooyala.com/static/v4/production/skin-plugin/html5-skin.min.css"/>
<div id='container' style='width:640px;height:360px;'></div>
<script>
var playerParam = {
'pcode':'gzYWo6WjQb-ME6DXK-evfOpU10JK',
'playerBrandingId':'44693ff5de064e928afd456dabdba24f',
'autoplay':false,
'loop':false
};
OO.ready(function() {window["ooyala_player_handle"] = OO.Player.create('container', 'U2cWYyYzE66_o4HL03_OrKwOh7yv_lAI', playerParam);});
</script>
<script type="text/javascript" src="//static.3playmedia.com/p/projects/11111/files/1111111/plugins/11111.js"></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