Plugin SDK Interactive Transcript Features

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-container 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. 

search.jpg

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. 
progress_bar.jpg

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">
<a href="javascript:void(0);" class="p3sdk-interactive-transcript-collapse p3sdk-collapse-onload icon-expand" label_when_expanded = "&nbsp;Hide Interactive Transcript" label_when_collapsed = "&nbsp;Show Interactive Transcript">
Hide Interactive Transcript
</a>
</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. 

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.

keyword.jpg

 

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-srcYour 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

translation_1.jpg

<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

translation_2.jpg 

<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             Data
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: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".

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk