Flowplayer: Embed an Interactive Transcript with Flowplayer on Your Webpage

Before you start:

Content Publishing must first be enabled in your 3Play Media account.
See more information on enabling content publishing in your 3Play account.

 If you haven't previously worked with Flowplayer, you must first download the Flowplayer distribution and add the files to your server.

Download the Flowplayer distribution.

Your Flowplayer-compatible videos (MP4, FLV, F4V) should also be loaded onto your server!

Follow the steps below 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 Flowplayer.

 

Step 1- Open your HTML editor 

Open the application you use to build and edit your webpages.

 

Step 2- Add the Flowplayer .js script in the <head> of the HTML page

Copy the code from the box below and paste it into the <head> of the HTML document.
The path to this file will be unique and will correlate to where it resides on your server.

This line of code should look similar to this:

<script src="path/to/the/flowplayer-3.2.10.min.js"></script>

 

Step 3- Add the video link to the <body> of the HTML page

Copy the link to your video and add it to the body of your HTML document within an href attribute. Also include the preferred dimensions and id="player". Note that the website and file name will be unique to your video and will correlate to where it resides on your server. 

The code should look similar to this:

<a href="http://www.mywebsite.com/myVideo.flv"
style="display:block;width:425px;height:300px;"
id="player">
</a>

 

Step 4- Add the code to load the Flowplayer

Add the following code to load the Flowplayer. Note that the path to this file will be unique and will correlate to where it resides on your server.

The code should look similar to this:

<script language="JavaScript">
flowplayer("player", "path/to/the/flowplayer-3.2.11.swf");
</script>

 

So far your HTML document should look similar to this:

<html>
<head>
<script src="path/to/the/flowplayer-3.2.10.min.js"></script>
</head>
<body>
<a href="http://www.mywebsite.com/myVideo.flv"
style="display:block;width:425px;height:300px;"
id="player">
</a>
 
<script language="JavaScript">
flowplayer("player", "path/to/the/flowplayer-3.2.11.swf");
</script>
</body>
</html>

Keep this HTML document open. 

Step 5- Log into your 3Play Media account

transcription closed captioning translation account 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 Flowplayer from the drop down menu.
In the Player ID field, there are no unique numbers/letters associated with your Flowplayer Player ID, it will always be "player."

Select Skin, set dimensions (Height and Width) and select from the available plugin Settings.Enter Kaltura video ID for interactive transcript plugin

After designing the plugin template click Save My Plugin.

See more information on the Interactive Transcript Plugin Settings.

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

Step 7- Select file

From the My Files page in your 3Play Media project click on the name of the file associated with your Flowplayer video.

Select transcript that correlates to Brigthcove video

Step 8- Click Publish Plugin

Click the Publish Plugin button located above your list of files.

Click Publish Plugin

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.

Select Plugin Template from drop down menu

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

Step 10- 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 embed code for Kaltura

   

Step 11- Paste the interactive transcript 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.

 Below is an example of what the interactive transcript plugin embed code should look like.   

<script src="http://static.3playmedia.com/p/projects/10013/files/78983/embed.js?plugin=transcript&settings=width:398,height:240,skin:frost,can_collapse:true,collapse_onload:true,can_print:true,scan_view:true&player_type=flowplayer&player_id=player" type="text/javascript"></script>

 

Once complete, the code should now look similar to the example below:

<html>
<head>
	<script src="path/to/the/flowplayer-3.2.10.min.js"></script>
</head>
<body>
	<a href="http://mywebsite.com/myvideo.flv"
	style="display:block;width:425px;height:300px;"
	id="player">
</a>

<script language="JavaScript">
	flowplayer("player", "path/to/the/flowplayer-3.2.11.swf");
</script>

<script src="http://static.3playmedia.com/p/projects/10013/files/78983/embed.js?plugin=transcript&settings=width:398,height:240,skin:frost,can_collapse:true,collapse_onload:true,can_print:true,scan_view:true&player_type=flowplayer&player_id=player" type="text/javascript"></script>
</body> </html>

 

Step 12- Publish the Flowplayer with the interactive transcript

Save your HTML code and publish it! Enjoy!

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk