This article goes over some of the customizable features of 3Play Media's interactive transcript. For more information about how to set up a basic interactive transcript with video embed, please see the article titled "Plugin SDK Overview".
The *Plugin SDK allows you to customize the interactive transcript using HTML and CSS. JavaScript can be used for more advanced customizations.
The code for the interactive transcript features below must be placed inside of the .p3sdk-interactive-transcript div.
Available Features
Light Scroll
Search
Progress Bar
Word Tracking
Download Transcript
Show or Hide Transcript Content
Clipping by Selection
Share a Clip on Social Media
Keyword Highlighting
Transcript Lock
Translations
Event Listeners
Examples
Light Scroll
If you have the transcript in a container that scrolls, by default the transcript will auto-scroll every line. Adding the attribute light_scroll = "true" to the p3sdk-interactive-transcript div makes it so that the scroll box will only move when the current word is towards the bottom of the visible text. Please note that if the user has the mouse hovering over the interactive transcript, scrolling is disabled.
Search
You can create a search box that looks through the interactive transcript for matches. Modify the CSS of the p3sdk-interactive-transcript-searchbox class to change how the search box looks and the CSS of the p3sdk-interactive-transcript-search-hit class to change how the results are displayed. The following example shows the results with white text highlighted in red. As a default feature, when a user hits the "esc" character, the search field and results will clear. 
HTML
<input type="text" class="p3sdk-interactive-transcript-searchbox"/>
CSS
.p3sdk-interactive-transcript-searchbox {
width: 125px;
}.p3sdk-interactive-transcript-search-hit {
background: red;
color: white;
}
Progress Bar
You can create a progress bar that when clicked, jumps to that time in the video. The search_result_marker is an optional attribute that, when used with the search bar, marks the location in the transcript where the search term is found. In the following example, the base progress bar (p3sdk-interactive-transcript-progressbar) is gray, and the progress (p3sdk-interactive-transcript-progress) fills in red as the video advances. 
HTML
<div class="p3sdk-interactive-transcript-progressbar" search_result_marker="*">
<div class="p3sdk-interactive-transcript-progress"></div>
</div>
CSS
.p3sdk-interactive-transcript-progressbar {
display: block;
background: gray;
border: 1px solid #fff;
width: 500px;
height: 1em;
margin: 0.15em;
cursor: pointer;
cursor: hand;
}.p3sdk-interactive-transcript-progress{
display: block;
float: left;
background: red;
width: 0%;
height: 1em;
}
Word Tracking Options
There are three HTML classes used for word tracking with the interactive transcript. p3sdk-current-word highlights the current word as it is being spoken. p3sdk-tracked-words highlights the words in the current paragraph that have been spoken. p3sdk-tracked-paragraph highlights the previous paragraphs that have already been spoken. To use any of these features, simply apply a CSS style, such as a background color or a font color, to the class you wish to implement.
Please note that these styles can be used alone or together, but p3sdk-tracked-words overrides the behavior of p3sdk-tracked-paragraph.
HTML
<div class="p3sdk-interactive-transcript" file_id="10013" project_id="78983">
<div class="p3sdk-interactive-transcript-content"></div>
</div>
Example 01. Current Word Example
The following video shows an interactive transcript with p3sdk-current-word tracking implemented as hot pink highlighting and white text.
CSS
.p3sdk-current-word {
background: #fc104b;
color: #fff;
border-radius: 2px;
}
Example 02. Current Word & Tracked Paragraph Example
The following video shows an interactive transcript with p3sdk-current-word and p3sdk-tracked-paragraph implemented. The hot pink highlights outline the behavior of p3sdk-current-word and the light green text outlines the behavior of p3sdk-tracked-paragraph.
CSS
.p3sdk-current-word {
background: #fc104b;
color: #fff;
border-radius: 2px;
}.p3sdk-tracked-paragraph {
color: lightgreen;
}
Example 03. Current Word & Tracked Words Example
The following video shows an interactive transcript with p3sdk-current-word and p3sdk-tracked-paragraph implemented. The hot pink highlights outline the behavior of p3sdk-current-word and the blue text outlines the behavior of p3sdk-tracked-word.
CSS
.p3sdk-current-word {
background: #fc104b;
color: #fff;
border-radius: 2px;
}.p3sdk-tracked-word {
color:blue;
}
Download Transcript
If you're using the 3Play Media API to get the interactive transcript, you can use the p3sdk-interactive-transcript-download class to create a link to download the transcript. If you are using a remote-src to get the transcript, this will not work.
HTML
<a href="javascript:void(0);" class="p3sdk-interactive-transcript-download" title="Download Transcript" download_format="pdf">Download Transcript</a>
Show or Hide Transcript Content
You can choose to have the Interactive Transcript collapsed or visible. The items contained in the p3sdk-interactive-transcript-collapse-visible div will remain visible when the transcript collapse is toggled. Everything else in the p3sdk-interactive-transcript will be hidden. p3sdk-collapse-onload sets the transcript to collapsed on page load. label_when_expanded and label_when_collapsed can be set to change the text when the transcript is collapsed or shown.
<div class="p3sdk-interactive-transcript-collapse-visible">
<button class="p3sdk-interactive-transcript-collapse p3sdk-collapse-onload icon-expand" label_when_expanded = " Hide Interactive Transcript" label_when_collapsed = " Show Interactive Transcript">
Hide Interactive Transcript
</button>
</div>
Clipping By Selection
Adding a clip_urls = "true" attribute to the p3sdk-interactive-transcript div, allows you to grab text in the interactive transcript that you highlight. This works by storing the information in the url. With clip_url's enabled, after you highlight a section of text in the interactive transcript, you should see the url of the page change to include #p3clip: with some numbers (ex. p3sdk.dev/lanya/test.html#p3clip:1.0.15290.18700). If you refresh the page, the video will start from the text you highlighted, and will pause at the end of the highlighted text. This event can be triggered only once, and the end point will be ignored after any rewind following the first encounter of the end point. You can also add ignore_clip_end_times="true" attribute to ignore the endpoint of the clip. This attribute will default to "false" unless otherwise specified.
In order to utilize this clipping feature, you'll need to use the most up-to-date version of p3SDK: p3.3playmedia.com/p3sdk.1.10.6.js
This works whether you are using the 3Play Media API to grab the transcript or hosting your own with a remote-src link. Please note that atts.in_time and atts.out_time will integers representing time in milliseconds. atts.text will be a string.
HTML
<div class="p3sdk-interactive-transcript" file_id="78983" project_id="10013" light_scroll="true" clip_urls="true">
The following code snippet shows how you might grab the time attributes and the highlighted text and assign them to variables.
JavaScript
p3$(p3sdk.get(0)).bind("transcript:selection", function(name, atts){
start_time_ms = atts.in_time;
end_time_ms = atts.out_time;
clipping_text = atts.text;
}
Share a Clip on Social Media
You can use the classes p3sdk-share and either p3sdk-facebook or p3sdk-twitter to create buttons or links to share your page on social media. If you have clip_url's enabled, you can highlight text in your interactive transcript before clicking the button or link to share the highlighted section of the video.
<div class="p3sdk-interactive-transcript" file_id="78983" project_id="10013" clip_urls="true">
<button type="button" class="p3sdk-share p3sdk-facebook">Share to facebook</button>
<button type="button" class="p3sdk-share p3sdk-twitter">Share to Twitter</button>
</div>
Keyword Highlighting
You can add a button or a checkbox to toggle keyword highlighting, which changes the font size of words in the interactive transcript based on importance. This is determined by a natural processing algorithm that you can read more about here.
To have a button toggle the keyword highlighting on and off, you must add the p3sdk-interactive-transcript-toggle-keywords-button class to the button. To have a checkbox toggle the keyword highlighting on and off, you must add the p3sdk-interactive-transcript-toggle-keywords class to the input.
When Using the 3Play Media API to Load Transcript
If you use the 3Play Media API to load the transcript (as we do in this example), you do not need to include any attributes to the button or input class to get keyword highlighting to work.
<div class="p3sdk-interactive-transcript" file_id="78983" project_id="10013" light_scroll="true">
<button class="p3sdk-interactive-transcript-toggle-keywords-button">
Keywords Toggle
</button>
<input type="checkbox" class="p3sdk-interactive-transcript-toggle-keywords"/>
Show Keywords
<div class="p3sdk-interactive-transcript-content"></div>
</div>
When Using "remote-src" or Pasting an HTML Transcript Directly in Page
If you are using remote-src or pasting an HTML transcript directly into the page to load the interactive transcript, you must link the keyword file in the p3sdk-interactive-transcript-toggle-keywords div (for checkboxes) or p3sdk-interactive-transcript-toggle-keywords-button div (for buttons). This can be done by linking a remote-src to the keyword file as seen in the example below.
<div class="p3sdk-interactive-transcript" remote-src="static.3playmedia.com/p/projects/10013/files/78983/transcript.html">
<input type="checkbox" class="p3sdk-interactive-transcript-toggle-keywords" remote-src="static.3playmedia.com/p/projects/10013/files/78983/transcript.html "/>
Show Keywords
<div class="p3sdk-interactive-transcript-content" ></div>
</div>
You can also paste the keywords file contents directly into the p3sdk-interactive-transcript-toggle-keywords div (for checkboxes) or p3sdk-interactive-transcript-toggle-keywords-button div (for buttons) using the keywords attribute. In the example below, we access the interactive-transcript using remote-src, but this would also work if you had pasted the HTML transcript file directly into the interactive-transcript-content div.
<div class="p3sdk-interactive-transcript" remote-src="static.3playmedia.com/p/projects/10013/files/78983/transcript.html">
<button class="p3sdk-interactive-transcript-toggle-keywords-button" keywords=[["video",250],["3play",250],["media",225],["captioning",175],["text",150],["transcription",150],["transformed.",150],["way.",150],["shareable",125],["put,",125],["before.",125],["clip.",125],["possibilities",125],["searchable",125],["beginning.",125],["push",125],["ever.",125],["process",125],["interacting",125],["captions",125],["accessibility",125],["engaged",125],["transcripts",125],["solution",125],["transcription.",125],["lecture",125],["media,",125],["video.",125],["simply",125],["button.",125],["create",125]]>
Keywords Toggle
</button>
Transcript Lock
You can give control to the user over whether the interactive transcript has scrolling disabled or not. Use the "p3sdk-scroll-toggle" class to enable this option.
When the transcript is in "locked" mode, the transcript will still automatically stop scrolling when the mouse is over the transcript. When the transcript is in "unlocked" mode, it will not scroll automatically at all.
<a href="javascript:void(0);" class="p3sdk-scroll-toggle p3sdk-scroll-toggle-locked" label_when_locked="Locked" label_when_unlocked="Unlocked">Locked</a>
Translations
You can show translations of your transcripts with a select box or links. To create a dropdown list of translations, you must use the select class p3sdk-interactive-transcript-track-select with options having the value of the remote-src of your translations. To have the translations show up as links, you must give the links a class p3sdk-interactive-transcript-track, with the url to the translated transcripts given as the remote-src. Your select class or links should be contained inside of the p3sdk-interactive-transcript div and the translations will show up where you place the p3sdk-interactive-transcript-content div.
Select Box
<div class="p3sdk-interactive-transcript" file_id="78983" project_id="10013" light_scroll="true">
<select class="p3sdk-interactive-transcript-track-select">
<option value="//static.3playmedia.com/p/projects/10013/files/78983/transcript.html">English</option>
<option value="//static.3playmedia.com/p/projects/10013/files/78983/translations/1610/transcript.html" selected>Spanish</option>
<option value="//static.3playmedia.com/p/projects/10013/files/78983/translations/1609/transcript.html">German</option>
<option value="//static.3playmedia.com/p/projects/10013/files/78983/translations/1611/transcript.html">Chinese</option>
<option value="//static.3playmedia.com/p/projects/10013/files/78983/translations/1608/transcript.html">French</option>
<option value="//static.3playmedia.com/p/projects/10013/files/78983/translations/1340/transcript.html">Japanese</option>
</select>
<div class="p3sdk-interactive-transcript-content"></div>
</div>
Links
<div class="p3sdk-interactive-transcript" file_id="78983" project_id="10013" light_scroll="true">
<ul id="my-language-tracks">
<li class="p3sdk-interactive-transcript-track selected" remote-src="//static.3playmedia.com/p/projects/10013/files/78983/transcript.html">English</li>
<li class="p3sdk-interactive-transcript-track" remote-src="//static.3playmedia.com/p/projects/10013/files/78983/translations/1610/transcript.html">Spanish</li>
<li class="p3sdk-interactive-transcript-track" remote-src="//static.3playmedia.com/p/projects/10013/files/78983/translations/1609/transcript.html">German</li>
<li class="p3sdk-interactive-transcript-track" remote-src="//static.3playmedia.com/p/projects/10013/files/78983/translations/1611/transcript.html">Chinese</li>
<li class="p3sdk-interactive-transcript-track" remote-src="//static.3playmedia.com/p/projects/10013/files/78983/translations/1608/transcript.html">French</li>
<li class="p3sdk-interactive-transcript-track" remote-src="//static.3playmedia.com/p/projects/10013/files/78983/translations/1340/transcript.html">Japanese</li>
</ul>
<div class="p3sdk-interactive-transcript-content"></div>
</div>
Event Listeners
You can bind to a P3SDK module event using the Javascript below. Note that if you are binding to multiple events, keep them all inside the same p3sdk_ready function.
In p3sdk.get(0), you are binding to the 0th P3SDK instance on the page. So if you have multiple instances running on the page for multiple video players, the first instance would be p3sdk.get(0), the second would be p3sdk.get(1), and so on. Most use cases will use p3sdk.get(0).
function p3sdk_ready(){
p3$(p3sdk.get(0)).bind("transcript:current_word", function(name,atts){
// custom code here
console.dir(atts);
});
}
| Setting | Description | atts |
| transcript:initialized | Interactive transcript module has been set. | |
| transcript:transcript_set | The content of the transcript has been set and activated. | file metadata(object) |
| transcript:expand | Show transcript | |
| transcript:collapse | Hide transcript | |
| transcript:selection | Section of the interactive transcript has been highlighted. |
in_time, out_time, text |
| transcript:clip_started | Clip portion has started |
inTime, outTime |
| transcript:clip_ended | Clip portion has ended | inTime, outTime |
|
transcript:keywords_highlighted |
Keywords turned on |
array of keywords and relative weightings (100-300) |
| transcript:keywords_cleared | Keywords turned off | |
| transcript:track_loaded | Track has successfully loaded | track_url |
| transcript:track_selected | Attempting to load track | |
| transcript:current_word | Follows the current spoken word | m(milliseconds), current_word |
| transcript:search | Search turned on | searchterm(string), matches(array of m of matches) |
| transcript:clear_search | Search Stop |
Examples
Basic Interactive Transcript Example
Customized Example
Responsive Example
Audio Book Example
*The Plugin SDK is sometimes referred to as "P3SDK".
0 Comments