Limelight: Embedding the Interactive Transcript 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 6- 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 Limelight from the drop down menu.

In the Limelight embed code below, the Player ID is referred to as id="limelight_player_111111". 

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

Select Skin, set dimensions (Height and Width) and select from the available plugin Settings.

See more information on the Interactive Transcript Plugin Settings.

Create Interactive Transcripts Plugin template

 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 Limelight player! If you change the width of the Limelight player to match the interactive transcript plugin, the aspect ratio of your video will likely be distorted.

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 7- Select your 3Play Media file

Go to the My Files page in your 3Play Media account.
Click on the file associated with your Limelight content.

Select your 3Play Media file

 

Step 8- Click Publish Plugin

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

Click Publish Plugin button

Step 9- Select a Plugin Template

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

Select Interactive Transcript Plugin Template

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

Step 10- 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 Plugin Embed Code 

 

Step 11- 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 12- 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 13- Publish your Limelight 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