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.
Step 4- Click Publish Plugin
Click the Publish Plugin button located above the transcript.
Step 5- Select from Plugin Templates
Click Select Your Plugin and from the drop down menu that appears select from your Plugin Templates.
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.
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.
0 Comments