JW Player: Embed the Captions Plugin with a JW Player on Your Webpage

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

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 JW Player.

 

Step 1- Open your HTML editor 

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

 

Step 2- Add the SWFObject 2.2 in the <head> of the HTML page 

Copy the code from the box below and paste it into the <head> of the HTML. 
After pasting the code, keep this HTML document open.

NOTE: For the SWFObject 2.2.js file to work, it must be downloaded and loaded onto your server!  

Download the SWFObject 2.2.js file.

<script type='text/javascript' src='swfobject-2.2.js'></script>

 

Step 3- Add the JW Player embed code in the <body> of the HTML page

Your JW Player embed code should look similar to the one below when embedding a video using the SWFObject 2.2. Note that the file and image extension will be based on your file's name.

NOTE: If you intend to use the Captions Overlay function, add a parameter that sets wmode to transparent 

<div id='mediaplayer'></div>

<script type="text/javascript">

   
var flashvars = {
     
'file':   '/videos/bunny.mp4',
     
'image':  '/thumbs/bunny.jpg'
   
};
   
   
var params = {
     
'allowfullscreen':        'true',
     
'allowscriptaccess':      'always'
   
};
 
   
var attributes = {
     
'id':                     'playerID',
     
'name':                   'playerID'
   
};

   swfobject
.embedSWF('player.swf', 'mediaplayer', '480', '270', '9', 'false',
       flashvars
, params, attributes);
   
</script>

 

Step 4- Log into your 3Play Media account

3play_login.jpg

 

Step 5- Select your 3Play Media file

Go to the My Files page in your 3Play Media account.
Click on the file associated with your JW content.

Select your 3Play Media file

 

Step 6- Click Publish Plugin

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

Click Publish Plugin button

 

Step 7- Select JW Player from the list of video players

jw_player.jpg

 

Step 8- Locate and enter your Player ID

After selecting your video player in step 7, scroll down the page. You will need to locate your Player ID from the JW Player embed code and then enter it in the blank field.

  • Locate the Player ID

When working with JW Player you will create an HTML document like the one below to publish your video. 
The Player ID will be located in the <div> tag following id=.          

There are no unique numbers/letters associated with your JW Player ID, it will always be "mediaplayer".

JW Player html

  • Enter the Player ID

After locating the Player ID from your JW Player embed code, enter it in the appropriate field and click Continue.

Mediaplayer video player ID

 

Step 9- Choose Plugin Type

Click on Captions Plugin.

Choose interactive plugin

 

Step 10- Design your plugin

From the Design and Publish page select your Caption Plugin Settings and then click Update Preview.

Update preview of captions

See more information on the Captions Plugin Settings.

 

Step 11- Copy the 3Play Media plugin embed code

After clicking Update Preview, scroll down the Design and Publish page. 

If you are publishing your page on https protocol, check the box next to Use SSL link.

Click on the line of code at the bottom of the page to select it. Once highlighted blue, copy this code. This is your 3Play Media captions plugin embed code. 

Copy interactive plugin embed code

 

Step 12- Paste the captions plugin 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 captions plugin embed code should look like.   

Formatting tip:  If you aren't using the OVERLAY function and want the video player and the captions plugin to match in width, change the captions plugin's width to match the width of the JW Player! If you change the width of the JW Player to match the captions plugin, the aspect ratio of your video will likely be distorted. 

Your HTML will similar to the example below when complete.

<html>

<head>
<script type='text/javascript' src='swfobject-2.2.js'></script>
</head>

<body>

<div id='mediaplayer'></div>

<script type="text/javascript">

var flashvars = {
'file':       '/videos/bunny.mp4',
'image':      '/thumbs/bunny.jpg'
};

var params = {
'allowfullscreen':       'true',
'allowscriptaccess':     'always'
};

var attributes = {
'id':                    'playerID',
'name':                  'playerID'
};

swfobject.embedSWF('player.swf', 'mediaplayer', '480', '270', '9', 'false', 
flashvars, params, attributes);
</script>

<script src="http://static.3playmedia.com/p/projects/10013/files/78983/embed.js?plugin=captions&settings=width:398,skin:dark,overlay:true,minimize_onload:true,searchbar:true&player_type=jw&player_id=mediaplayer" type="text/javascript"></script>

</body>
</html> 

 

Step 13- Publish your JW player with the captions plugin

Save your new HTML code and publish it!  Enjoy!

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk