Limelight: Embedding the Audio Description with the Limelight 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 bellow 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 a Limelight player.

Step 1- Log into your Limelight Video Platform Account

limelight.jpg

 

Step 2- Select your video

After logging in, you will be directed to the Media page where your content will be displayed. Select the video you want to create an interactive transcript for.

Select Limelight video content 

 

Step 3- Copy the Website embed code

To the right of your list of content, under Media Properties, scroll down and click Generate Embed Code.

Generate embed code for Limelight video

A pop-up menu will appear where the Website embed code is displayed. Select the player that best matches your needs. Click Copy.

Limelight Website Embed Code

 

Step 4- Paste the Limelight Website embed code

Open the page of HTML where you want to embed the interactive transcript for the Limelight player and paste the embed code in the <body>.

The code will look similar to this:

<span class="LimelightEmbeddedPlayer"><script src="http://assets.delvenetworks.com/player/embed.js"></script><object type="application/x-shockwave-flash" id="limelight_player_727629" name="limelight_player_727629" class="LimelightEmbeddedPlayerFlash" width="480" height="321" data="http://assets.delvenetworks.com/player/loader.swf"><param name="movie" value="http://assets.delvenetworks.com/player/loader.swf"/><param name="wmode" value="window"/><param name="allowScriptAccess" value="always"/><param name="allowFullScreen" value="true"/><param name="flashVars" value="mediaId=a3e00274d4564ec4a9b29b9466432335&amp;playerForm=LVPPlayer"/></object><script>LimelightPlayerUtil.initEmbed('limelight_player_727629');</script></span>

 Note: The code will look similar to the example below except for certain ID information.

 

Step 5- Log into your 3Play Media account

3Play 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 Limelight from the drop down menu.
> For Plugin Type choose Audio Description 
> For Player ID use the Limelight player id from the Limelight embed code below.  It will look something like: id="limelight_player_111111".  

The numbers/letters following limelight_player_ will be unique to your video's embed code.  


Find out how to identify your video ID here.


After locating the Player ID from your Limelight embed code, enter it in the appropriate field and click Save My Plugin.

Limelight Embed Code

Step 8- Select file

From the My Files page in your 3Play Media project click on the name of the file associated with your Limelight 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 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=delve&player_id=limelight_player_111111" type="text/javascript"></script>

REMEMBER THAT THE PLAYER ID WILL BE DIFFERENT FROM THE ONE IN THE EXAMPLE ABOVE!

 

Step 13- Add functiondelvePlayerCallback

Add the following code between the Limelight and interactive transcript plugin embed codes:

<script type="text/javascript">
function delvePlayerCallback(playerId,eventName,data){
}
</script>

The entire document should now look like this:

<span class="LimelightEmbeddedPlayer"><script src="http://assets.delvenetworks.com/player/embed.js"></script><object type="application/x-shockwave-flash" id="limelight_player_111111" name="limelight_player_111111" class="LimelightEmbeddedPlayerFlash" width="480" height="321" data="http://assets.delvenetworks.com/player/loader.swf"><param name="movie" value="http://assets.delvenetworks.com/player/loader.swf"/><param name="wmode" value="window"/><param name="allowScriptAccess" value="always"/><param name="allowFullScreen" value="true"/><param name="flashVars" value="mediaId=a3e00274d4564ec4a9b29b9466432335&amp;playerForm=LVPPlayer"/></object><script>LimelightPlayerUtil.initEmbed('limelight_player_111111');</script></span>

<script type="text/javascript">
function delvePlayerCallback(playerId,eventName,data){
}
</script>

<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=delve&player_id=limelight_player_111111" type="text/javascript"></script> 

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