Adding Interactive Transcripts to JW Player 6

This article shows you how to add a 3Play Media interactive transcript to JW Player 6 using the Your Website method and the JW Player Publish Wizard.

 

Step 1- JW Player Publish Wizard

Go to JW Player's Publish Wizard page.

 

Enter the link to the video on your website under Media File.  Where it says Poster, you may also include a JPG or PNG preview image that will show up before you press play on the video.  Finally where it says Media Title, enter a title for your video, this will show up inside the play button before you press play.  

Next hit Publish.  This brings you to the Configure Your Player page.  Choose you appropriate options and click Get Embed Code.

 

Poof!  You have the code for your video!  On this page the instructions are pretty straight forward.  Simply copy your unique code into the appropriate places of your website's code.  Note: the FileImage, and Title in the example is for a SAMPLE code, unique to the video uploaded for this tutorial.  Your code will be different. 

Here you can see it gives you your unique code after you hit Get Embed Code.  

Take note of your "div id" as you will need to enter it when you make your plugin template.

 

Step 2- 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 transcript plugin.  The 3Play Media file selected should be the file that corresponds to the media file selected in Step 1.

Step 3- Create New Plugin Template

Create a new plugin template for an interactive transcript.  

> For Plugin Template choose either Interactive Transcript Light or Interactive Transcript Dark.
> For Player Type select JW Player from the drop down menu.
> For Player ID field enter myjwplayer.
> For a fixed pixel Height and pixel Width either a value followed by px. For example, 300px 
For a responsive plugin embed code enter a value followed by %. For example, 100%
> For Settings choose from the available options.

 See more information on how to create an Interactive Transcript Plugin Template

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.

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.  

 

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

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>

<script src="http://jwpsrv.com/library/c8eAUG6QEeSglQ6sC0aurw.js"></script>

</head>

<body>

<div id='playerUygvNDEKOsKT'></div>

<script type='text/javascript'>
jwplayer('playerUygvNDEKOsKT').setup({
file: 'http://3playmedia.com/p3123/erex/3Play_Media_Overview.mp4',
image: 'http://3playmedia.com/p3123/erex/3play_shot.png',
title: 'TEST',
width: '100%',
aspectratio: '16:9',

 });

</script>

<script type="text/javascript" src="//static.3playmedia.com/p/projects/10013/files/78983/plugins/10186.js"></script>

</body>
</html>

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

Step 8- Review your video with interactive transcript

Upload the HTML file to your server to preview your interactive transcript along with your JW Player 6

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk