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.

Select Plugin Template, to choose the stye of the interactive transcript.  Dimensions (Height and Width) can also be adjusted.

Create Interactive Transcript Plugin for Ooyala

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>

 

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

Formatting tip:  If you want the video player and the interactive transcript plugin to match in width, change the interactive transcript plugin'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. 

 

 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 interactive transcript

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