Embedding a 3Play Media Interactive Plugin

When the transcription process for a file is complete an interactive transcript plugin or captions plugin can be embedded on a webpage along with a variety of video and audio players.

Before starting...

Content Publishing must first be enabled in your 3Play Media project.
Also a Plugin Template must be saved to your project as well.

See more information on how to enable Content Publishing
See more information on how to create a Plugin Template
PRO TIP: Designing a Plugin Template is a necessary step for embedding a plugin on a webpage with a media player. Before getting started it is best practice first to design and save at least one plugin template to your 3Play Media project.

 

Step 1- Copy media player embed code

3Play Media interactive plugins can be embedded on a webpage with a variety a video and audio players.
To get started first copy the asset's embed code that corresponds to the file that was transcribed by 3Play Media.

Video platforms typically offer more than one type of embed code. 
The list below details the type of embed code that should be used when embedding a 3Play Media plugin.

PLATFORM     EMBED TYPE                      
Brightcove       publishing code:    Website  with a JavaScript/API enabled Brightcove player
Kaltura            embed type:           Dynamic  delivery type: Streaming but avoid RTMP
Limelight         embed type:           Website
Ooyala            embed type:           Website
SoundCloud   embed type:            iFrame/Widget                                             
Vimeo             embed type:           iFrame
Wistia             embed type :           iFrame
YouTube        embed type:            iFrame

Step 2- Paste player embed into HTML  

Using a text or HTML editor open a new HTML page and paste the media file embed code into the <body> of the html.  So far your HTML should look similar to the example below but note that the media player's embed code will be unique to your content.

<html>
 <head>
 </head> 
  <body>
   <iframe src="//player.platformSite.com/video/1234abc" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

  </body>
</html>

Step 3- Select a file

Log into your 3Play Media project.
Select the file from the My Files page that you want to use to create an interactive plugin.
The 3Play Media file selected should be the file that corresponds to the media file selected in step 1.

Click Transcript File

Step 4- Click Publish Plugin

Click the Publish Plugin button located above the transcript.

Publish Plugin button

Step 5- Select from Plugin Templates

Click Select Your Plugin and from the drop down menu that appears select from your Plugin Templates.

Select a plugin template

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

See more information on Plugin Templates

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.

Interactive transcript captions plugin embed code

Step 7- Paste Plugin embed code into HTML  

Next go back to the HTML doc and paste the 3Play Media Plugin embed code below the video embed code.
Your HTML should now look similar to the example below except both embed codes will be unique to your media file and 3Play file.

<html>
 <head>
  </head> 
   <body>
   <iframe src="//player.platformSite.com/video/1234abc" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script type="text/javascript" src="//static.3playmedia.com/p/projects/000/files/0000/plugins/00000.js"></script>

 </body>
</html>

 

Next steps...

Enabling the JavaScript API

Next you will need to enable the JavaScript API so the plugin can communicate with the player.
Enabling the JavaScript API is necessary in order to make your plugin interactive so, for example, when a viewer pauses the media player the plugin pauses as well.

Each video and audio player has a different method to enable the JavaScript API. 

Click here to learn how to modify the JavaScript API for the specific media player being used in conjunction with a plugin.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk