Publish Plugin: Captions Plugin Overview

Before publishing the Captions Plugin:

  • Your content must be embedded in a video player on a webpage.
     
  • The JavaScript API for your player must be enabled. 
     
  • Depending on what video player you are using, modifications may need to be made to your video embed code to enable 3Play plugins to interact with your content. 

            - View sample embed codes, Player IDs, and modifications forBrightcoveYouTubeKalturaLimelight,                       Vimeo iFrameVimeoOoyalaWistia iFrameFlowplayerJW PlayerWistia, HTML5, and SoundManager2.

  • Make sure that Content Publishing is set to Enabled in your 3Play Media project.

            - See more information about Enabling Content Publishing.

 

Step 1- Log into you 3Play Media account 

Step 2- Create a Plugin Template

Navigate to Settings > Plugin Templates >  and create a new Captions Plugin template. 
See more information on how to create a Plugin Template

Name your template.  For Player select the player you are using from the drop down menu.
In the Player ID field enter the appropriate Player ID associated with your video player.

See more information on locating your video Player ID.

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

Captions Plugin Settings:

Skin: If you choose to have your captions displayed below the video as opposed to Overlay mode, you can choose between a light or dark background.

Overlay: Displays your closed captions over the the lower part of the video and is similar to broadcast closed captions. If you don't select Overlay, by default your captions will be displayed below the video player.

Overlay Draggable: Enables your audience to use their cursor to drag the closed captions overlay anywhere over the video image. 

Minimize Onload: When your captions are set to Overlay, this option provides a clickable CC icon in the bottom, right-hand corner of the video image. When your audience clicks the icon the closed caption overlay appears.

Searchable Captions:  Enables your audience to search the text of the closed captions.  It is indicated by a magnifying glass icon located to the right of the caption box.

Include TranslationsThis parameter will only be available if the file you are building the plugin for has been translated into other languages. By checking this box, your audience will have the ability to toggle between transcripts in the different languages the original file was translated to.

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

  

Step 3- Select the file you want create the captions plugin for

Once on the My Files page, click on the file you want to create the captions plugin for.

 

Step 4- Click Publish

Above your list of files, click on the Publish button.

 

Step 5- Select a Plugin Template

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

Select Caption Plugin Template

 

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

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

Note: The following example code is using the Kaltura player.  Each video player's code will be different.

<html>
<head>
</head>

<body>

<script src="http://cdnapi.kaltura.com/p/114532/sp/11103200/embedIframeJs/uiconf...>
<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">VideoManagement</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 8- Publish your captions plugin

Save the changes to your HTML document to publish your captions plugin.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk