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 (highlighted in pink). 

02. The video player embed code and the interactive transcript must be contained inside of the p3sdk-container div, which is highlighed in yellow. Adding the class p3sdk-debug to the p3sdk-container div allows you extra debugging features in your browser JavaScript Console. 

03. The code highlighted in blue is an example of an HTML5 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.
 

<!DOCTYPE html>
<html>
<head>
    <title>P3SDK Basic Example</title>
<style type="text/css">

.p3sdk-interactive-transcript-content{
    width: 500px;
    height: 220px;
    overflow-y: auto;
}
</style>

<script src="http://p3.3playmedia.com/p3sdk.current.js"></script>

</head>
<body>

<div class="p3sdk-container" player_id="html-player-6" player_type="html5">
    <video width="400" id="html-player-6" controls>
        <source src="http://videos.3playmedia.com.s3.amazonaws.com/10013/78983/3aba0b861bfc1a970782b09856fb1ff6.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
    </video>

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

</div>
</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