HARRIET OWERS-BRADLEY: So I'm going
to show you how to design and publish
a very basic interactive transcript plugin.
So say you have a video.
In this example, I'm going to use our plugin tutorial video,
which I've set up on a really, really simple website.
So in order to add an interactive transcript,
you're going to need to have access
to the raw HTML for your website.
You don't need to have too advanced technical skills
to do this, but a basic knowledge of HTML
might be useful, as you will need to add and edit
a little bit of code.
So the first step is to design the interactive transcript
itself.
And this is done from your 3Play Media account.
So this is my 3Play Media account.
It should look familiar.
I am just going to go over to Settings and to Plugin
Templates.
So a plugin template is how you design your plugin.
You can create as many different plugin templates as you like.
Each have different styles and features enabled.
And if you use more than one video player,
you will need to create a different template
for each type of video player.
And then when it comes to publishing your plugin,
you'll simply select a plugin template,
and the embed code will be generated
based on the settings of that template.
So back to our example.
I'm going to add an interactive transcript plugin.
So I'm going to click on this button here
to make a new template.
Here you can see on the left the design options for the plugin.
And over on the right, you can see a preview.
So I'm going to walk through creating one of these now.
So I'm going to name my plugin Default, just so
that I know that this is a plugin I
should use in the future.
If you remember the video player I was using-- back here.
So I'm using the YouTube player.
So I need to select YouTube from this list.
And this is a full list of video players.
So if you see a video player on this list, good news,
because the plugin's going to work with it.
And like I mentioned at the beginning,
although the interactive transcript is completely
separate from the video player, it
does need to be hooked up to the video player in order to work.
And because each video player works slightly differently
behind the scenes, it's very important
that you select the video player that you're using right here.
It's also important that you get this player ID right.
There's a lot of different video players
and lots of different ways to embed each video player.
So you might have to check out the support docs
and read the instructions that apply to your video player
when finding this player ID.
This link here takes you straight
to the support doc, where you can find
the appropriate instructions.
So if I keep going through-- so for YouTube,
the player ID to use is myytplayer.
So I'm going to enter that in here.
Skin, we have a few different options for skin.
My favorite one right now is Minimalist,
so I'm going to select that.
Height and width of the plugin.
I know that the width of my video is 560 pixels.
I'm just going to edit that.
And then these are our settings.
We went through some of these at the beginning,
if you remember the collapse, the print, the download,
scan view.
Translations, so if you select Translations and your video
has been transcribed, this is going
to give you the option to toggle between the different languages
that you've translated your video in.
I'm just going to select a few of these for now.
And when you hit Update at the bottom here,
you can see that the preview has updated
to include the settings that I just selected.
So this looks good.
So I'm going to save my plugin.
And you can see it down here at the bottom, Default.
I'm now going to return to my files.
I should have mentioned at the beginning
that you will need to have transcribed
the video that you're going to be publishing the plugin for.
So my tutorial video that I'm using is this one.
So here you can see there's a Publish button and Publish
Plugin.
And I'm going to select my Default template that I just
created.
And you can see here that I've got
the embed code for this plugin.
I'm going to select this, copy this for now.
There's also links to the embed instructions.
This will go to the support docs.
I'll come to those in a second.
And if you wanted to make any changes to your plugin
templates, you can get there via this button.
OK, so I've copied the embed code.
I'm now going to go to the HTML for my website.
So you remember this is my website.
It's got a video on it.
That's about it.
So over here, you can see the HTML.
So this page, super basic.
Not much here.
This is the embed code for the video player.
And I want to add my interactive transcript
plugin below my video.
So I'm just going to paste in the embed code right there.
So we're nearly done.
If I was to return to my site now and refresh and everything,
you'd actually see the plugin below the video.
However, it wouldn't be hooked up with the video.
It wouldn't actually be working.
So in order to make the plugin work,
I'm going to have to make a few modifications to the code.
The plugins rely on JavaScript.
And so it's important to enable the JavaScript
for the video players.
And to do this, I'm going to refer to the support
docs for YouTube.
This one-- you can find links to all of these
from the plugin template page.
You can also search within the plugins.
I just had this one ready to go.
So when I click on YouTube, I can see the modifications
listed here that are necessary.
So the first one is to include the JavaScript for the YouTube
video player.
So I'm going to copy this, come back over, just paste this in.
I then need to actually enable the JavaScript
within the player.
So in YouTube, this is done by just adding this
at the end of the embed code.
I'm also going to need to add an ID to the iframe.
If you remember when I designed the plugin,
I typed in myytplayer as my player ID.
So this is how the plugin actually
finds the video player.
So I'm just going to copy this as well and add that in here.
And that should be it.
We've already got our embed code below.
So this is about everything you need for the YouTube player
to work with the interactive transcript.
I can show you that over here.
So you can see this is the transcript and my video.
So it should be fully interactive.
Yep.
And this is being translated.
So here you can see that I can switch languages.
I also have the print and download options
that I enabled there.
OK, so that was the most basic implementation of the plugin.
Our plugins are really flexible, and there
are many different ways you could customize a plugin to fit
in better with your website.
Completed by 3Play Media 03/20/15, 4:00am