Kaltura: Embedding the Interactive Transcript 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 8- 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 Kaltura from the drop down menu.
In the Player ID field enter the Kaltura ID that begins with kaltura_player_ and is followed by a string of numbers.

Select Skin, set dimensions (Height and Width) and select from the available plugin Settings.Enter Kaltura video ID for 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 Kaltura player! If you change the width of the Kaltura player to match the interactive transcript plugin, the aspect ratio of your video will likely be distorted.

The string following kaltura_player_  will be unique to your video's embed code.
The player ID is located in the <div id> tag within your Kaltura embed code

Kaltura Dynamic Embed Code

Step 9- 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 10- Click Publish Plugin

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

Click Publish Plugin

Step 11- Select a Plugin Template

Click Select Your Plugin and from the drop down menu that appears select the plugin template created in step 8.

Select Plugin Template from drop down menu

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

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