Plugin SDK Overview

3Play Media's interactive transcript allows your users to interact with your videos in an entirely new way. Users can search your video and navigate by clicking on any word to jump to that exact point. It’s also a great way to make your video accessible, and broaden your audience reach with the use of translations. Learn more about the interactive transcript here

Now with the *Plugin SDK you can customize the look and feel of your videos, and add features such as a progress bar or word tracking, just using HTML and CSS. You can use JavaScript for more advanced customization. 

Please note that Plugin SDK is a replacement for previous versions of P3 Plugins (found here). Do not use them together. 

Basic Set Up

The following code shows a basic example of how to set up a Plugin SDK Interactive Transcript. By default, clicking on a word in the interactive transcript navigates to that point in the video. 

01. First, you must include the Plugin SDK JavaScript file (search for Import p3sdk library in the sample code). 

02. The video player embed code and the interactive transcript must be contained inside of the p3sdk-container div,(search for Plugin container block in the sample code). Adding the class p3sdk-debug to the p3sdk-container div allows you extra debugging features in your browser JavaScript Console. 

03. The code within the Video embed code block in the sample code is an example of an YouTube video player embed. The Plugin SDK integrates with 14 different players. Look at the Video Player Integrations section below to find out how to use the interactive transcript with your favorite player.

04. Optionally, if you wish to use the Audio description plugin the sample code is within the Audio Description Plugin block.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Import p3sdk library -->

<script src="http://p3.3playmedia.com/p3sdk.1.10.7.js"></script>
<title>P3SDK Example</title>
<style type="text/css">
.p3sdk-interactive-transcript-content{
width: 560px;
height: 220px;
overflow-y: auto;
}

.p3sdk-current-word {
background: #fc104b;
color: #fff;
border-radius: 2px;
}

.p3sdk-audio-description-component {
width: 550px;
}
</style>
</head>

<body>

<!-- Plugin container block start -->
<div class="p3sdk-container" player_id="yt-player1" player_type="youtube">
<!-- Video embed code block start -->
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
<iframe id="yt-player1" width="560" height="315" src="http://www.youtube.com/embed/Q0CbN8sfihY?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<!-- Video embed code block end -->

<!-- Audio Description Plugin block start -->
<div class="p3sdk-audio-description-component">
<div class="p3sdk-audio-description" p3sdk-default-autoplay="true" p3sdk-snippets="[{&quot;extended&quot;:true,&quot;start_time&quot;:495,&quot;end_time&quot;:3960,&quot;text&quot;:&quot;A figure silhouetted against a low wide window and reflected on a glossy black floor. Water falls slowly past the window, which opens onto a large hangar.&quot;,&quot;delay&quot;:0,&quot;audio_snippet_id&quot;:41862,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:7911},{&quot;extended&quot;:true,&quot;start_time&quot;:12536,&quot;end_time&quot;:14770,&quot;text&quot;:&quot;A figure, seen from above, leads a line of white-clad soldiers carrying rifles across a lava field. A line of massive four-legged armored A.T.-A.T. walkers march across an open plain, raising clouds of red dust. &quot;,&quot;delay&quot;:4463,&quot;audio_snippet_id&quot;:41863,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:10826},{&quot;extended&quot;:true,&quot;start_time&quot;:22357,&quot;end_time&quot;:24062,&quot;text&quot;:&quot;A figure wearing a black mask with silver around the eye slot stands against a red background. A black-gloved hand picks up a black lightsaber hilt off a glossy table.&quot;,&quot;delay&quot;:13096,&quot;audio_snippet_id&quot;:41864,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:7961},{&quot;extended&quot;:false,&quot;start_time&quot;:24062,&quot;end_time&quot;:28889,&quot;text&quot;:&quot;Rey activates a blue lightsaber, breathing determinedly. She stands against a tall cliff face.&quot;,&quot;delay&quot;:19353,&quot;audio_snippet_id&quot;:41865,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:4827},{&quot;extended&quot;:false,&quot;start_time&quot;:29494,&quot;end_time&quot;:31095,&quot;text&quot;:&quot; Text, [Lucasfilm]/LUWKAXSFIHLM/ L.t.d.&quot;,&quot;delay&quot;:19353,&quot;audio_snippet_id&quot;:41866,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:1601},{&quot;extended&quot;:true,&quot;start_time&quot;:31276,&quot;end_time&quot;:32767,&quot;text&quot;:&quot;Aerial view of a craggy, steep island surrounded by blue water. Rey holds a metal lightsaber hilt out. A mechanical hand takes it from her. &quot;,&quot;delay&quot;:19353,&quot;audio_snippet_id&quot;:41867,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:6666},{&quot;extended&quot;:true,&quot;start_time&quot;:38270,&quot;end_time&quot;:40770,&quot;text&quot;:&quot;Luke, dressed in brown robes and heavily bearded, looks deeply at her. He holds the lightsaber hilt carefully.&quot;,&quot;delay&quot;:24566,&quot;audio_snippet_id&quot;:41868,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:5346},{&quot;extended&quot;:true,&quot;start_time&quot;:42070,&quot;end_time&quot;:42070,&quot;text&quot;:&quot;Rey, wearing a hooded brown cloak, picks her way through the mist over sharp rocks. A cave. Light shines onto a central platform. Rey, her face shadowed, looks down.&quot;,&quot;delay&quot;:27444,&quot;audio_snippet_id&quot;:41869,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:8934},{&quot;extended&quot;:true,&quot;start_time&quot;:45451,&quot;end_time&quot;:52213,&quot;text&quot;:&quot;She swings a lightsaber on the edge of a cliff, spinning around to hold it to the side of a volcanic tuff. Rock cracking. Luke looks down, alarmed. Tiny shards of rock float upwards from Rey's hands. She closes her eyes. &quot;,&quot;delay&quot;:36411,&quot;audio_snippet_id&quot;:41870,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:11623},{&quot;extended&quot;:true,&quot;start_time&quot;:57784,&quot;end_time&quot;:60164,&quot;text&quot;:&quot;A metal hand claws out of a burning pile of wood. A cloaked figure and R2-D2 watch a building burn.&quot;,&quot;delay&quot;:41291,&quot;audio_snippet_id&quot;:41871,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:4752},{&quot;extended&quot;:false,&quot;start_time&quot;:61658,&quot;end_time&quot;:62558,&quot;text&quot;:&quot;Luke turns away.&quot;,&quot;delay&quot;:43669,&quot;audio_snippet_id&quot;:41872,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:900},{&quot;extended&quot;:true,&quot;start_time&quot;:63152,&quot;end_time&quot;:64148,&quot;text&quot;:&quot;Rey, tearful, clings to a flat, wide stone.&quot;,&quot;delay&quot;:43669,&quot;audio_snippet_id&quot;:41873,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:2724},{&quot;extended&quot;:true,&quot;start_time&quot;:64148,&quot;end_time&quot;:67136,&quot;text&quot;:&quot;Doors open before a figure wearing a black helmet with metallic detailing around the eye slot. Kylo Ren stands in an elevator, gazing at the helmet in his hand. The scars on his face are still healing. He punches the wall.&quot;,&quot;delay&quot;:45420,&quot;audio_snippet_id&quot;:41874,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:10699},{&quot;extended&quot;:true,&quot;start_time&quot;:68630,&quot;end_time&quot;:70622,&quot;text&quot;:&quot;Explosions. Spaceships veer past each other, firing bolts of energy. Kylo Ren pilots a spaceship. His ship spirals past explosions, veering into a wide hangar.&quot;,&quot;delay&quot;:53136,&quot;audio_snippet_id&quot;:41875,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:9499},{&quot;extended&quot;:true,&quot;start_time&quot;:76100,&quot;end_time&quot;:77594,&quot;text&quot;:&quot;General [Leia]/LEYAH/ in a command center. Quick cuts between [Leia]/LEYAH/ and Kylo Ren.&quot;,&quot;delay&quot;:60644,&quot;audio_snippet_id&quot;:41876,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:3764},{&quot;extended&quot;:true,&quot;start_time&quot;:80084,&quot;end_time&quot;:88550,&quot;text&quot;:&quot;Blue model of a spaceship in the crosshairs on a holo screen. Kylo Ren holds his thumb just above a trigger. He swallows heavily. [Leia's]/LEYAHS/ mouth is creased with worry. Text, This Christmas.&quot;,&quot;delay&quot;:62938,&quot;audio_snippet_id&quot;:41877,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:10054},{&quot;extended&quot;:true,&quot;start_time&quot;:88550,&quot;end_time&quot;:91040,&quot;text&quot;:&quot;A disc-like spaceship, the Millennium Falcon, streaks cave formations, enemy ships hot on its tail.&quot;,&quot;delay&quot;:64565,&quot;audio_snippet_id&quot;:41878,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:5291},{&quot;extended&quot;:true,&quot;start_time&quot;:91040,&quot;end_time&quot;:94028,&quot;text&quot;:&quot;[Chewbacca]/CHUWBAAKAH/, a huge, hairy creature, opens his mouth wide. A small, wide-eyed creature copies him.&quot;,&quot;delay&quot;:67401,&quot;audio_snippet_id&quot;:41879,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:5119},{&quot;extended&quot;:true,&quot;start_time&quot;:94028,&quot;end_time&quot;:95024,&quot;text&quot;:&quot;A green laser bolt ignites a ship. Poe Dameron clutches a window.&quot;,&quot;delay&quot;:69570,&quot;audio_snippet_id&quot;:41880,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:3457},{&quot;extended&quot;:true,&quot;start_time&quot;:100502,&quot;end_time&quot;:101498,&quot;text&quot;:&quot;An engine thruster. A ship shoots into space. Poe speaks before a group of rebels. &quot;,&quot;delay&quot;:72072,&quot;audio_snippet_id&quot;:41881,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:4579},{&quot;extended&quot;:true,&quot;start_time&quot;:102592,&quot;end_time&quot;:105540,&quot;text&quot;:&quot;Electricity dances across her reflective mask. Captain Phasma, a shining figure in a black cape, draws her sword. Finn opens a crackling energy sword. Their weapons clash, the building around them crumbling as it burns. Ships explode. BB-8, a round robot, crackles with electricity as his head spins around.&quot;,&quot;delay&quot;:75659,&quot;audio_snippet_id&quot;:41882,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:16395},{&quot;extended&quot;:true,&quot;start_time&quot;:110430,&quot;end_time&quot;:112410,&quot;text&quot;:&quot;Luke, teeth gritted. A family of crystalline foxes. A wide opening with stone above and below. [Leia]/LEYAH/ turns away. A figure plunges into deep water. Rey pulls herself onto wet stone and stands.&quot;,&quot;delay&quot;:89131,&quot;audio_snippet_id&quot;:41883,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:10921},{&quot;extended&quot;:true,&quot;start_time&quot;:113400,&quot;end_time&quot;:115875,&quot;text&quot;:&quot;Finn leading a group of white-clad Stormtroopers. A battalion of ranked soldiers. A.T.-A.T. walkers march across a wide white plane, ships exploding above them.&quot;,&quot;delay&quot;:98098,&quot;audio_snippet_id&quot;:41884,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:8508},{&quot;extended&quot;:true,&quot;start_time&quot;:116370,&quot;end_time&quot;:118350,&quot;text&quot;:&quot;Ships spiral from the sky, throwing up bright red clouds as they crash.&quot;,&quot;delay&quot;:104146,&quot;audio_snippet_id&quot;:41885,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:3582},{&quot;extended&quot;:false,&quot;start_time&quot;:119745,&quot;end_time&quot;:122866,&quot;text&quot;:&quot;A [wizened]/WIHZEND/ man reaches out. Rey screams, suspended mid-air.&quot;,&quot;delay&quot;:105772,&quot;audio_snippet_id&quot;:41886,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:3121},{&quot;extended&quot;:false,&quot;start_time&quot;:129680,&quot;end_time&quot;:133728,&quot;text&quot;:&quot;Rey, lit by flames. Kylo looks back at her and reaches out a gloved hand.&quot;,&quot;delay&quot;:105772,&quot;audio_snippet_id&quot;:41887,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:4048},{&quot;extended&quot;:false,&quot;start_time&quot;:135680,&quot;end_time&quot;:137867,&quot;text&quot;:&quot;Title, Star Wars. The Last [Jedi]/JHEHDAY/. &quot;,&quot;delay&quot;:105772,&quot;audio_snippet_id&quot;:41888,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:2187},{&quot;extended&quot;:false,&quot;start_time&quot;:139880,&quot;end_time&quot;:146176,&quot;text&quot;:&quot;December 15. Tickets available now. In Real D 3D and IMAX 3D. This film is not yet rated.&quot;,&quot;delay&quot;:105772,&quot;audio_snippet_id&quot;:41889,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:6296},{&quot;extended&quot;:false,&quot;start_time&quot;:146780,&quot;end_time&quot;:147559,&quot;text&quot;:&quot;Subscribe. &quot;,&quot;delay&quot;:105772,&quot;audio_snippet_id&quot;:41890,&quot;state&quot;:&quot;paused&quot;,&quot;audio_duration&quot;:779}]">
<audio class="mycroft-audio-track">
<source src="https://s3.amazonaws.com/files.3playmedia.com/10219/2072696/2072696-1429-description.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div class="mycroft-audio-description-widget">
<button aria-expanded="true" aria-label="Toggle Audio Description Controls" aria-pressed="true" class="mycroft-audio-description-snippet-toggle glowing-border">
<i alt="Audio Description Widget" aria-hidden="true" class="mycroft-primary" title="Audio Description Widget" width="30px"></i>
</button>
<button aria-label="Mute" aria-pressed="false" class="mycroft-audio-description-toggle glowing-border">
<i alt="Mute Audio Description" aria-hidden="true" class="mycroft-volume-display mycroft-primary"></i>
</button>
<input class="mycroft-vol-control" max="100" min="0" step="1" title="volume control" type="range">
</div>
</div>
<div class="debug"></div>
</div>
<!-- Audio Description Plugin block end -->

<!-- Interactive transcript block code -->
<div class="p3sdk-interactive-transcript" file_id="2072696" project_id="10219">
<div class="p3sdk-interactive-transcript-content" style="height: 117px;"></div>
</div>
<!-- Interactive transcript code block end -->

</div>
<!-- Plugin container block end -->
</body>
</html>

 

Working with 3Play Linked Accounts

If you are using a 3Play linked account to a video platform such as YouTube, you can drive the interactive transcript module off the platform’s unique ID.  This can be helpful if your systems are working off the video platform ID, so you don’t have to track the 3Play identifiers at the same time.

So for example, if you pulled a video in from your YouTube linked account, and it has 3Play ID 1234, and the YouTube ID is xYZ123abc, the following embed codes will produce the same result:

<div class="p3sdk-interactive-transcript" file_id=“1234” project_id=“999”>
    <div class=“p3sdk-interactive-transcript-content”></div>
</div>
<div class="p3sdk-interactive-transcript" file_id=“xYZ123abc" use_video_id="1" project_id=“999”>
    <div class=“p3sdk-interactive-transcript-content”></div>
</div>

Hosting the Transcript

The interactive transcript can be self hosted or pulled from 3Play Media's API. 

<div class="p3sdk-interactive-transcript" file_id="78983" project_id="10013">
   <div class="p3sdk-interactive-transcript-content"></div>
</div>

You can host your own transcript if it is formatted as an HTML, SRT or a TPM file. The default src_type is html, so if your file is an SRT file, you must add src_type = "srt" as an attribute. If your file is an SRT file, you must use src_type="tpm".

<div class="p3sdk-interactive-transcript" remote-src="http://static.3playmedia.com/p/projects/10013/files/78983/transcript.html">
<div class="p3sdk-interactive-transcript-content"></div>
</div>

Finally, if your transcript is in an HTML format, you can simply copy and paste it into the page inside the p3sdk-interactive-transcript div. Make sure that your p3sdk-interactive-transcript div has the attribute embedded="true"

<div class="p3sdk-interactive-transcript" embedded="true">
<div class="p3sdk-interactive-transcript-content">
<p>
<span m='590'>There's</span>
<span m='890'>the</span>
<span m='1170'>old</span>
<span m='1640'>way</span>
<span m='1830'>of</span>
<span m='1900'>doing</span>
<span m='2220'>captioning</span>
<span m='2960'>and</span>
<span m='3160'>transcription.</span>
<span m='4650'>The</span>
<span m='4780'>way</span>
<span m='5030'>that's</span>
<span m='5270'>expensive,</span>
<span m='6810'>unreliable,</span>
<span m='7775'>and</span>
<span m='8170'>well</span>
<span m='8820'>complicated.</span>
<span m='9960'>And</span>
<span m='10780'>then</span>
<span m='10900'>there's</span>
<span m='11170'>the</span>
<span m='11280'>3Play</span>
<span m='11620'>Media</span>
<span m='11920'>way.</span>
<span m='13370'>The</span>
<span m='13460'>most</span>
<span m='13810'>advanced</span>
<span m='14320'>solution</span>
<span m='14800'>for</span>
<span m='14930'>video</span>
<span m='15290'>accessibility</span>
<span m='16160'>ever.</span>
<span m='17820'>It's</span>
<span m='18020'>captioning</span>
<span m='18540'>and</span>
<span m='18700'>transcription</span>
<span m='19805'>utterly</span>
<span m='20160'>transformed.</span>
</p>
<p>
<span m='21710'>3Play</span>
<span m='22250'>Media</span>
<span m='22620'>makes</span>
<span m='22880'>it</span>
<span m='23020'>simple</span>
<span m='23440'>to</span>
<span m='23600'>upload</span>
<span m='23940'>your</span>
<span m='24040'>video</span>
<span m='24630'>and get</span>
<span m='24740'>back</span>
<span m='25120'>near</span>
<span m='25470'>perfect</span>
<span m='26030'>captions</span>
<span m='26600'>and</span>
<span m='26790'>transcripts</span>
<span m='27800'>in</span>
<span m='27940'>just</span>
<span m='28200'>about</span>
<span m='28500'>any</span>
<span m='28750'>format.</span>
<span m='29880'>If</span>
<span m='29990'>you</span>
<span m='30090'>use</span>
<span m='30380'>lecture</span>
<span m='30730'>capture</span>
<span m='31240'>or a</span>
<span m='31460'>video</span>
<span m='31850'>platform,</span>
<span m='32560'>3Play</span>
<span m='33030'>Media</span>
<span m='33520'>lets you</span>
<span m='33750'>process</span>
<span m='34180'>your</span>
<span m='34570'>files</span>
<span m='34960'>with</span>
<span m='35080'>a</span>
<span m='35200'>push</span>
<span m='35570'>of</span>
<span m='35680'>a</span>
<span m='35740'>button.</span>
</p>
<p>
<span m='36550'>But</span>
<span m='37100'>that's</span>
<span m='37420'>just</span>
<span m='37650'>the</span>
<span m='37710'>beginning.</span>
<span m='38640'>With</span>
<span m='38840'>3Play</span>
<span m='39170'>Media</span>
<span m='39600'>the</span>
<span m='39910'>text</span>
<span m='40260'>of</span>
<span m='40330'>your</span>
<span m='40440'>video</span>
<span m='41000'>comes</span>
<span m='41300'>alive.</span>
<span m='42210'>Every</span>
<span m='42510'>word</span>
<span m='42940'>becomes</span>
<span m='43290'>searchable</span>
<span m='43755'>and</span>
<span m='44220'>interactive.</span>
<span m='45400'>It's</span>
<span m='45630'>now</span>
<span m='45890'>possible</span>
<span m='46380'>to</span>
<span m='46460'>jump</span>
<span m='46770'>to</span>
<span m='47145'>an</span>
<span m='47520'>exact</span>
<span m='47720'>quote or</span>
<span m='47920'>scene</span>
<span m='48730'>and</span>
<span m='48880'>create</span>
<span m='49350'>a</span>
<span m='49410'>shareable</span>
<span m='49820'>clip.</span>
</p>
<p>
<span m='50930'>Simply</span>
<span m='51320'>put,</span>
<span m='52040'>3Play</span>
<span m='52430'>Media</span>
<span m='52820'>opens</span>
<span m='53170'>more</span>
<span m='53380'>possibilities</span>
<span m='54170'>for</span>
<span m='54250'>your</span>
<span m='54390'>video</span>
<span m='54930'>than</span>
<span m='55220'>ever</span>
<span m='55490'>before.</span>
<span m='56570'>Now</span>
<span m='57250'>once</span>
<span m='57650'>invisible</span>
<span m='58270'>text</span>
<span m='58980'>can</span>
<span m='59050'>be</span>
<span m='59320'>found</span>
<span m='59640'>by</span>
<span m='59790'>search</span>
<span m='60140'>engines.</span>
<span m='60950'>Now</span>
<span m='61670'>people</span>
<span m='62070'>are</span>
<span m='62220'>engaged</span>
<span m='62890'>and</span>
<span m='63060'>interacting</span>
<span m='63640'>with</span>
<span m='63760'>your</span>
<span m='63860'>video.</span>
<span m='64910'>Now</span>
<span m='65610'>you'll</span>
<span m='65730'>wonder</span>
<span m='66060'>how</span>
<span m='66200'>you</span>
<span m='66530'>ever</span>
<span m='66800'>did</span>
<span m='67010'>video</span>
<span m='67590'>any</span>
<span m='67910'>other</span>
<span m='68160'>way.</span>
</p>
<p>
<span m='69180'>3Play</span>
<span m='69580'>Media,</span>
<span m='70460'>captioning</span>
<span m='70970'>and</span>
<span m='71120'>transcription</span>
<span m='72210'>transformed.</span>
</p>
</div>
</div>

 

Video Player Integrations 

The Plugin SDK integrates with the following 15 players. Follow the link to find a tutorial to use them with the Plugin SDK interactive transcript. 

Brightcove Legacy
Brightcove CMS
Limelight
Flowplayer
HTML5
JW Player
Kaltura
Ooyala
Soundcloud
Video.js
Viddler
Vimeo Iframe
Wistia
Youtube

Customizing the Interactive Transcript

Now that you've finished setting up a basic interactive transcript, you can head over to the Plugin SDK Interactive Transcript Features page.

*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