Limelight: Embedding the Captions Plugin 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 the captions plugin for.

selectvideo_limelight.jpg 

 

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

 

Step 4- Paste the Limelight Website embed code

Open the page of HTML where you want to embed the captions plugin and Limelight player. If the video is already embedded in the page using the website code, skip to step 5. Paste the blog code into the HTML document.

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

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

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

 

Step 5- Log into your 3Play Media account

Click 3Play Media 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 Player ID field enter the Limelight ID that begins with limelight_player_ and is followed by a string of numbers as seen below.

Select Plugin Template Type.  Two styling options are available.

Set dimensions (Height and Width) and select from the available plugin Settings

Create Captions Plugin Template

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

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

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.

See more information on the Captions Plugin Settings.

Select Captions Plugin From Drop Down Menu

 

 

Step 10- Copy the 3Play Media plugin embed code

After selecting a plugin template, copy the plugin embed code that appears within the Publish Plugin pop-up menu.

Copy Captions plugin embed code

 

Step 11- Paste the captions plugin 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. 

<script src="http://static.3playmedia.com/p/projects/10013/files/78983/embed.js?plugin=captions&settings=width:398,skin:dark,overlay:true,minimize_onload:true,searchbar:true&player_type=delve&player_id=limelight_player_111111" type="text/javascript"></script>

REMEMBER THAT YOUR CONTENT'S PLAYER ID WILL BE DIFFERENT FROM THE ONE IN THE EXAMPLE ABOVE!

Formatting tip:  If you aren't using the OVERLAY function and want the video player and the captions plugin to match in width, change the captions plugin's width to match the width of the Brightcove player! If you change the width of the Limelight player to match the captions plugin, the aspect ratio of your video will likely be distorted. 

 

Step 12- Add functiondelvePlayerCallback

Add the following code between the Limelight and captions 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=captions&settings=width:398,skin:dark,overlay:true,minimize_onload:true,searchbar:true&player_type=delve&player_id=limelight_player_111111" type="text/javascript"></script>

 

Step 13- Publish your Limelight player with the captions plugin

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