Kaltura: Embedding the Audio Description Plugin with Your Kaltura Video on Your Web Page

Content Publishing must 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 Kaltura account

Kaltura login

 

Step 2- Navigate to the Content page

Click on the Content tab located at the top of the page. This will direct you to the video files in your Kaltura Management Console (KMC).

Kaltura content tab

Step 3- Click Preview & Embed

Locate the video you are going to embed on a page with an audio description plugin. 
Under the Actions tab, click on Select Action and from the drop-down menu that appears, click Preview & Embed.

Kaltura Actions Preview & Embed

 

Step 4- Configure and Copy the Dynamic Embed code

From the pop-up menu that appears, configure your Player and Embed Type.
If Embed options are not visible, click Show Advanced Options to display these configurations.

Select Player:  Select a previously configured caption-enabled video player.

See more information on setting up a caption-enabled player.

Embed Type:   Select Dynamic Embed

Dynamic Player Kaltura Video Embed Generator

After configuring your Kaltura Dynamic embed code, click Copy Embed & Close.

Step 5- Paste the Kaltura Dynamic embed code

Open a new HTML document in your text editor and paste the code into the <body> of your document. 

Note: The code will look similar to the example below except for the div id and targetId. These items will be unique for your video's embed code. Take note of this ID - you will need it to set up your plugin.

<html>
<head>
</head>
<body>
<script src="http://cdnapi.kaltura.com/p/111032/sp/11103200/embedIframeJs/uiconf_id/11111111/partner_id/111111"></script>
<div id="kaltura_player_1501000000" style="width: 560px; height: 395px;" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<span itemprop="name" content="words-of-wilderness"></span>
<span itemprop="description" content=""></span>
<span itemprop="duration" content="186"></span>
<span itemprop="thumbnail" content="http://cfvod.kaltura.com/p/111032/sp/11103200/thumbnail/entry_id/1_8yie600g/version/100001"></span>
<span itemprop="width" content="560"></span>
<span itemprop="height" content="395"></span>
</div>
<script>
kWidget.embed({
"targetId": "kaltura_player_1501009507",
"wid": "_111032",
"uiconf_id": 39644761,
"flashvars": {
"streamerType": "auto",
},
"cache_st": 1501009507,
"entry_id": "1_8yie600g"
});
</script>
</body>
</html> 

Step 6- Adjust the flashVars parameter

After pasting the code, add "externalInterfaceDisabled" : "false" to the flashvars parameter.

It should go from:

kWidget.embed({
"targetId": "kaltura_player_1501009507",
"wid": "_111032",
"uiconf_id": 39644761,
"flashvars": {
"streamerType": "auto",
},
"cache_st": 1501009507,
"entry_id": "1_8yie600g"
});

 

To this:

kWidget.embed({
"targetId": "kaltura_player_1501009507",
"wid": "_111032",
"uiconf_id": 39644761,
"flashvars": {
"streamerType": "auto",
"externalInterfaceDisabled" : "false"
},
"cache_st": 1501009507,
"entry_id": "1_8yie600g"
});

This will establish a connection to the Javascript API.  


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

Step 7- Log into your 3Play Media account

transcription closed captioning translation 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 Kaltura from the drop down menu.
> For Plugin Type choose Audio Description 
> For Player ID enter the Kaltura ID that begins with kaltura_player_ and is followed by a string of numbers.
Find out how to identify your video ID here.


Under Plugin Settings you will notice options for a volume equalizer. Selecting this feature allows the audio to automatically lower the source volume while the description plays, and increase the volume when it is done.

When you publish with the Audio Description Plugin, you will see an equalizer icon next to the AD icon. If you decide you want to adjust the volume manually, you can turn this automatic feature on or off by clicking the equalizer icon on your plugin. 

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 Kaltura 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 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>
<script src="http://cdnapi.kaltura.com/p/111032/sp/11103200/embedIframeJs/uiconf_id/11111111/partner_id/111111"></script>
<div id="kaltura_player_1501000000" style="width: 560px; height: 395px;" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<span itemprop="name" content="words-of-wilderness"></span>
<span itemprop="description" content=""></span>
<span itemprop="duration" content="186"></span>
<span itemprop="thumbnail" content="http://cfvod.kaltura.com/p/111032/sp/11103200/thumbnail/entry_id/1_8yie600g/version/100001"></span>
<span itemprop="width" content="560"></span>
<span itemprop="height" content="395"></span>
</div>
<script>
kWidget.embed({
"targetId": "kaltura_player_1501009507",
"wid": "_111032",
"uiconf_id": 39644761,
"flashvars": {
"streamerType": "auto",
},
"cache_st": 1501009507,
"entry_id": "1_8yie600g"
});
</script>
<script type="text/javascript" src="//static.3playmedia.com/p/projects/11111/files/1111111/plugins/11111.js"></script>
</body>
</html> 

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