Before publishing the Captions Plugin:
- Your content must be embedded in a video player on a webpage.
- 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 for: Brightcove, YouTube, Kaltura, Limelight, Vimeo iFrame, Vimeo, Ooyala, Wistia iFrame, Flowplayer, JW Player, Wistia, 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 Translations: This 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.
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.
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.
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.
<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/Video-Solutions">Video Solutions</a>
<a href="http://corp.kaltura.com/Products/Features/Video-Player">Video Player</a></div>
"externalInterfaceDisabled" : false
<!-- Start of 3Play Media Plugin Embed Code -->
<!-- End of 3Play Media Plugin Embed Code -->
Step 8- Publish your captions plugin
Save the changes to your HTML document to publish your captions plugin.