Kaltura: Embedding the Audio Description with Your Kaltura Player on Your Webpage

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.

Alternatively, we offer a stripped-down version of this article that highlights the key steps and modifications for creating an interactive plugin with Kaltura.

 

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 interactive transcript. 
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 PlayerDelivery Type, and  Embed Type
If Delivery and 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.

Delivery Type: Select from one of the Streaming options. RTMP Streaming should be avoided if possible.

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

Note: The code will look similar to the example below except for the div id and targetId. These items will be unique for each video's embed code.

<script src="http://cdnapi.kaltura.com/p/114532/sp/11103200/embedIframeJs/uiconf_id/12025501/partner_id/1114432"></script>
<div id="kaltura_player_0123456789" style="width: 560px; height: 395px;"><a href="http://corp.kaltura.com/products/video-platform-features">Video Platform</a>
<a href="http://corp.kaltura.com/Products/Features/Video-Management">Video Management</a> 
<a href="http://corp.kaltura.com/Video-Solutions">Video Solutions</a>
<a href="http://corp.kaltura.com/Products/Features/Video-Player">Video Player</a></div>
<script>
kWidget.embed({
"targetId": "kaltura_player_0123456789",
"wid": "_1660432",
"uiconf_id": 1223401,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"twoPhaseManifest": "true",
"streamerType": "hdnetworkmanifest"
},
"cache_st": 1372107675,
"entry_id": "1_fw1542dz6"
});
</script>

 

Step 6- Adjust the flashVars parameter

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

It should go from:

"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"twoPhaseManifest": "true",
"streamerType": "hdnetworkmanifest"
},

TO:

"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"twoPhaseManifest": "true",
"streamerType": "hdnetworkmanifest",
"externalInterfaceDisabled" : "false"
},

This will establish a connection to the Javascript API.  
Be sure to set allowScriptAccess to “always"

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

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


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.

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

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/114532/sp/11103200/embedIframeJs/uiconf_id/12025501/partner_id/1114432"></script>
<div id="kaltura_player_0123456789" style="width: 560px; height: 395px;"><a href="http://corp.kaltura.com/products/video-platform-features">Video Platform</a>
<a href="http://corp.kaltura.com/Products/Features/Video-Management">Video Management</a> 
<a href="http://corp.kaltura.com/Video-Solutions">Video Solutions</a>
<a href="http://corp.kaltura.com/Products/Features/Video-Player">Video Player</a></div>
<script>
kWidget.embed({
"targetId": "kaltura_player_0123456789",
"wid": "_1660432",
"uiconf_id": 1223401,
"flashvars": {
        "streamerType": "rtmp",
        "externalInterfaceDisabled" : false
},
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"twoPhaseManifest": "true",
"streamerType": "hdnetworkmanifest"
},
"cache_st": 1372107675,
"entry_id": "1_fw1542dz6"
});
</script>

<!-- Start of 3Play Media Plugin Embed Code -->

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

<!-- End of 3Play Media Plugin Embed Code --> 

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