JW Player: Embed the Audio Description Plugin with a JW Player on Your Webpage

This article shows you how to add a 3Play Media Audio Description Plugin to JW Player using JW Player (Cloud) + JWPlatform. You can find more info about publishing with JW Player (Cloud) here.

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

Step 1 - Open Your HTML Editor

Open the application you use to build and edit your web pages.

Step 2 - Add the Player Library URL

 

Add the Cloud Player URL to the <head> of your page. Note that the PLAYERID (in bold below) will be unique to your player and will be a string of letters and numbers. You can get your player ID by selecting the player you want to use in your jwplayer.com account.

<html>
<head>
<script src="//content.jwplatform.com/libraries/PLAYERID.js"></script>
</head>
<body>
</body>
</html>

Step 3 - Add Your Video Embed Code

In the <body> of your page, add the video embed. Your div id (bolded below) can be any string of letters. Take note of this div id - you'll need it to build your audio description plugin. You must match the <div id> to the var playerInstance (also bolded below), so it looks like this: var playerInstance = jwplayer("jw-player-7");

Note that the video URL link below will be unique to your embed code.

<html>
<head>
<script src="//content.jwplatform.com/libraries/PLAYERID.js"></script>
</head>
<body>
<div id="jw-player-7"></div>
<script type="text/javaScript">
var playerInstance = jwplayer("jw-player-7");
playerInstance.setup({
file: "//content.jwplatform.com/videos/EZeUxxxx-xogUCyxx.mp4"
});
</script>
</body>
</html>

See more info about embedding media files using JW Player.

Step 4- Log into your 3Play Media Account

3play_login.jpg

 

Step 5- Create New Plugin Template

Navigate to Settings.

Click Plugin Templates, then click Create a Plugin Template.

Create a new plugin template for Audio Description.  

> For Player select jw7 from the drop down menu. 
> For Plugin Type choose Audio Description. 
> For Player ID choose a player ID that matches your video id.

Under Plugin Settings you will notice options for a volume equalizer. Selecting this feature allows the audio to automatically lower the source volume while the description plays, and increase the volume when it is done.

When you publish with the Audio Description Plugin, you will see an equalizer icon next to the AD icon. If you decide you want to adjust the volume manually, you can turn this automatic feature on or off by clicking the equalizer icon on your plugin. 

Step 6- Select your 3Play Media file

Go to the My Files page in your 3Play Media account.
Click on the file associated with the content you want to embed on a webpage using JW Player.

Select your 3Play Media file

Step 7- Click Publish Plugin

Click the Publish Plugin button located above the transcript.

Step 8- Select from Plugin Templates

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

 

Step 9- Copy the Plugin embed code

After selecting a plugin template copy the plugin embed code that appears within the Publish Plugin pop-up menu.  

 

Note:  The above is an example code, your code will be different.

Step 10 - 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>
<script src="//content.jwplatform.com/libraries/PLAYERID.js"></script>
</head>
<body>
<div id="jw-player-7"></div>
<script type="text/javaScript">
var playerInstance = jwplayer("jw-player-7");
playerInstance.setup({
file: "//content.jwplatform.com/videos/EZeUxxxx-xogUCyxx.mp4"
});
</script>
<script type="text/javascript" src="//static.3playmedia.com/p/projects/11111/files/1111111/plugins/11111.js"></script>
</body>
</html>

Note:  The above is an example code, your code will be different. 

Step 11- Review your video with Audio Description Plugin

Upload the HTML file to your server to see your audio description plugin along with your JW Player video.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk