« Return to video

Quick Start to Interactive Transcripts [TRANSCRIPT]

TOLE KHESIN: Welcome, and thanks for joining us. This webinar is called Quick Start to Interactive Transcripts. My name is Tole Khesin with 3Play Media, and I’ll be moderating this webinar.

I’m joined by our product manager, Harriet Owers-Bradley, and Josh Miller, who’s the VP of Business Development. We’ve scheduled 30 minutes for this webinar, and we’ll leave the last 10 minutes or so for Q&A.

Great, so as for the agenda, Harriet will start off with an overview of interactive transcripts and a quick demo of the features. Josh will discuss the benefits of interactive transcripts and show some customer demos. Harriet will then demonstrate how to set up, publish, and customize an interactive transcript.

So before we begin, we’re going to do a quick poll. The question is, are you currently using interactive transcripts or other video search tools? And the answers that you can select are either yes for all content, yes for some content, or no.

Oh, awesome, so it looks like most of you are not yet using interactive transcripts. So hopefully this will be a useful webinar. So with that, I’ll hand things over to Harriet.

HARRIET OWERS-BRADLEY: Thanks, Tole. Hello, everyone. So as Tole said, I am going to go over what an interactive transcript is. And I’ll start with some terminology to be aware of as we talk about the interactive transcript plugin.

So if you can see here, I’m just on a page on the 3Play Media website that has a video here and an interactive transcript here. So the interactive transcript is everything included in this box here. So in this case, it’s to the right of the video player. But you’ll also see other implementations where it might be below the video player or somewhere else on the page.

So the interactive transcript is hooked up to the video player. And they work together to create the interactive experience. The video player is separate from the transcript. And there are many different types of video players. Some that you might have heard of are YouTube, JW Player, Vimeo, Brightcove, Kaltura, Ooyala, Wistia. And our plugins will work with all of those video players and more, which I probably didn’t mention. But I’ll show you that list later on.

OK, so what exactly do we mean when we say “interactive”? So if this transcript was not interactive, it would just be a block of text below the video. The transcript is interactive in the sense that you can interact with it to control your viewing experience.

So one of the most basic yet useful features is the ability to use the transcript to navigate through the video. So for example, you could read ahead in the video– in the transcript, sorry– and then select somewhere to start playing the video from.

Another really useful feature is the search. So for example, I could search for the word “mobile” here. And you can see that it is mentioned at each of these points in the timeline, and a lot in this section right here. So I could click here in the timeline, and the video will jump to that point. And you’ll see all of the results of “mobile” highlighted in the text, too.

So there are some other features as well. One of those is this clipping feature. This allows you to share a link to a specific clip from the video. So if I highlight a block of text and click the Clipping icon here, I have a few options of how I want to share this link. And when I do share it, the video will automatically start playing from this point in the video.

Other features are print. This allows you to print a copy of the transcript. There is also the option to download the transcript to your computer. We can see that saving down there.

This little icon here lets you collapse and expand the transcript. And we also have the Scan View feature. So if I enable Scan View, you can see that some of the words are bigger than others. These words are scaled according to how frequently the words occur in a transcript, and also the significance of the words in relation to the rest of the transcript.

So that’s about it for the overview of the interactive transcript. Later, when we go over how to design and publish a plugin, I’ll show you which of these features can be controlled in your plugin settings and which ones can be customized. So now I’m going to pass over to Josh, who’s going to talk about some of the benefits of including an interactive transcript on your website.

JOSH MILLER: Great, thanks, Harriet. So as Harriet just showed us, the interactivity itself is really a pretty significant tool when it comes to the viewing experience. Because the viewer now has far more control over what they’re watching at any given point by using the text as the navigation tool.

MIT OpenCourseWare actually conducted a study with hundreds of users based on a couple of courses that had the interactive transcripts deployed. And the results were pretty convincing that the searchability did, in fact, enhance the viewing experience, where 97% said, yes, it was enhancing their viewing experience.

In terms of comprehension, having the text available as a consumption aid can be extremely powerful. So if you think about someone who speaks English as a second language, reading the text will be easier than following along with the audio. In fact, many people do better with text as a learning device than audio or visuals.

Plus, if you’re in a gym, a library, or office, you may not have access to the audio. The BBC actually published a study that showed that 80% of caption users didn’t even have a hearing disability. So it’s not all about legal accommodation.

When you have the corresponding text transcript of a video, you’re now enabled to address search engine optimization much better. The internet, and search engines in general, are really built around text. A search engine can’t index what is being spoken without the transcript on the page.

So addressing SEO like this can have a significant effect on your inbound traffic from search engines. We conducted a study with Discovery Digital Networks. And they found that when captions or transcripts were added to their YouTube content, they say more than a 7% increase in overall views.

Just like closed captions, synchronized text in the form of an interactive transcript provides a valuable form from an accessibility perspective. It allows everyone to follow along with the video. There are 48 million Americans with some degree of hearing loss. And that number will most likely continue to grow with an aging population and medical advances that lead to more lives being saved in various situations. So it’s something that can be very important for people to consume content in general.

From a legal perspective, there are actually several laws in place that require closed captioning for video content. Sections 504, 508, the ADA, and the FCC’s CVAA are all in play depending on the type of content you have. The laws all specify that there must be text synchronized with the video content.

So the interactive transcript would fit that description. We’re not suggesting that you should avoid captioning or do this instead of captioning. It’s just another way to address the requirement.

Once you have the text from the video, it’s much easier to create derivative pieces of content. So if you’re in a marketing role, for example, transcribing the video content can be extremely valuable so that you can create other pieces of content that are completely separate.

Transcribing the text is also the first step to localizing the content to create transcripts and captions and subtitles in other languages. If you have a global audience, this would certainly be a consideration. And when you have the translation tracks created and an interactive transcript published, they will all work seamlessly together.

We’ve built that functionality out. So the viewer can very easily select which language they want, and all the same functionality applies, including the search, being able to click on a word, jump to that part of the video. All of that will work.

So now I’m going to walk through a few demos of live implementations just so you can kind of see a little more of what we’re talking about. Harriet already got us started, so we’ll go into a little more depth with these.

Great, so the first example comes from the MIT Infinite History Project. This is a video library of approximately 200 long-form interviews. On the left, you see the interactive transcript like we’ve been talking about. And some of the same functionality, such as the scan view, is here.

And on the right, what we have is another plugin that we call Archive Search. And Archive Search actually allows you to search across the entire media library with much of the same functionality. And it ties right in to the interactive transcript.

So for example, I could search for the word “linguistics.” And it’s going to show me a visual timeline and search results based on that word. So it’s showing me all the videos that have the word “linguistics” and where it appears in the timeline.

So if I expand a section based on the red block, it will show me the actual text and give me the option to play back from this exact point. So you see it’s going to switch the video out and start playing from that point. And you can see that in the interactive transcript.

So the next example is from the Harvard School of Public Health. And what you see here is very similar. They have the interactive transcript on the left, the Archive Search on the right.

Here, what they’ve done is actually taken the Archive Search and the interactive transcript and really added several layers of customization. So on the one hand, just from a style perspective, it’s matching their colors, their style scheme for the whole website. And it looks like something that belongs in their page.

What they’ve also done is added certain buttons and different functionality to the interactive transcript. So the download option looks a little bit different. The share option looks a little different.

So if I highlight a section of text here, and I click Share a Clip, it just looks a little bit different from what you’ve seen with some other examples. And all that can be done relatively easily.

So here, I’ll search for a word, search for “policy.” And we’ll see how– see, the styling is just a little bit different. It allows me to have all the same functionality. We can play the clip from the section, or I can move on to look through other results.

The last example is from a presidential debate on Al Jazeera, on their website. Here we have the interactive transcript like we’ve been talking about. What’s really cool here is that they not only built on top of the plugin, but they’ve really used the transcript data to do something pretty unique for the viewers.

So now when I search– let’s say I search for the word “Iran.” It’s going to show us which candidate said the word, how frequently, and where. So you can see there must’ve been quite a bit of discussion around the Middle East in this segment here, because President Obama and Mitt Romney were both talking about Iran quite a bit.

And so it’s a really interesting way of expanding the functionality, but still just using the plugin and the transcript data to do this. So all that’s relatively easy to do with some development resources. And so now I’m going to turn it back to Harriet so that she can actually walk you through how to set up things like this and how to start thinking about these types of customization options.

HARRIET OWERS-BRADLEY: Great, thanks, Josh. Let me get back here. OK, 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 won’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– sorry, the screen is moving– Plugin Templates. So a plugin template is how you design your plugin. You can create as many different plugin templates as you like, each with 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. So 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 the plugin I should use in the future. If you remember the video player I was using– go 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 your 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 is 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, so 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. OK, 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. So 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 back to the– well, I’m going to go to the HTML for my website. So if 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 for 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 am 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 would 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 your plugins– sorry, for the video players.

And to do this, I’m going to refer to the support docs for YouTube. 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. I’m sorry if I’m jumping around a little. So if 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. Let’s see, so– mesed that up.

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.

And this has been translated. So here you can see that I can switch languages. And I also have the print and download options that I enabled there. OK, so that was the most basic implementation of a plugin. Our plugins are really flexible, and there are many different ways you could customize a plugin to fit in better with your website.

One thing we get asked a lot is how to change the color of the spoken text. So that would be the color of this text as it’s highlighted and spoken. So I’m just going to show you how you could customize the color of that.

You can see in this example, I’ve matched the color to the header of my website. So our plugins generate HTML on the page. So it’s possible to style them similar to any other element on your page. So if you’re familiar with the development tools on your browser, you can actually just click and inspect the element.

So you can see here that all these spans are containing the words of the plugin. And in this case, if you wanted to change the color of the highlighted or the spoken word, you can see that as each word is spoken, it gets this class, tracked word. And as each paragraph has been spoken– well, this is bad example. Because I’m in the top paragraph.

Move down– sorry, yeah, you can see that after each paragraph is spoken, it gets a class, tracked paragraph. So if I wanted to change the color of these words, all I need to add in is this CSS right here, which I included in my CSS style sheet for this page.

Yeah, so you can see here I just included the important rule. That’s just to make sure that this style was going to override the existing styles. There’s actually a tidier way to do that, which I can show you a little bit later when we go over the Plugins Gallery.

All right, so more customization options– so we’ve documented a lot of examples of these in the Plugins Gallery. This is available at this URL up here. I think Tole will mention it in a second in the resources.

So for the interactive transcript, there’s actually a long-form embed that you can see here, which allows you to make a lot more customizations. As you can see, it’s a lot more detailed. So it’s just easier to make the changes.

This isn’t available through your 3Play Media account, like the one I demonstrated at the beginning. But it is fully documented on this page, and also on our support sites. Now, if I scroll down here, you can see we’ve documented all of the various options that you can add into that embed.

There’s a few examples here, too. I’m just going to go through this one as an example. So you can see here that the transcript has been included within a tab. You’ll also notice that the top bar and the bottom bar are missing. There’s no search. There’s no print. There’s no download option.

That’s actually a setting you can set in the long-form embed that will give you this kind of very minimal template of the plugin. And then you can see the source code and how we implemented the plugin by clicking the button at the top there. And then there’s another example down there.

So I mentioned before the styling of the plugin. So with this long-form embed, you can create your own custom skin in a much tidier way. So you can see here that all of the colors have been changed of the plugin. And this can be done by including a link to an external style sheet, which you can just add within this long-form embed.

Another advanced option is here. You can see you can actually add a custom button into the plugin. So there’s lots of starting points for you here of ideas and ways that you can customize these plugins.

So yeah, if you’re interested in customizing a plugin, it’s definitely worth checking out this Plugins Gallery. You can also reach out to us with any questions, and we’ll be happy to point you in the right direction. I think that’s pretty much everything I planned on showing you. I’m going to hand things back to Tole now for Q&A.

TOLE KHESIN: Great, thanks very much, guys. That was really great. So before we move on to Q&A, we want to do one more poll. So we’re going to launch that now. So the question is, what is the main reason that you want to implement interactive transcripts? And the options there are search, user experience, SEO, accessibility, or not sure.

Great, so here are the results. And this is pretty typical of what we’d expect to see. A lot of people are doing this in order to improve the user experience. Accessibility is also a big one. And you can see that search and SEO, those are big parts of it as well.

Great, so we will move on to Q&A. So we have some resources here that you can see. The first one is the interactive transcripts products pages on our website. You can get some information there.

The next one is the Plugins Gallery that Harriet showed you just a minute ago. This third section links to some of the demos that we showed if you want to see those live sites for MIT and Harvard School of Public Health.

And then the last one at the bottom there, that is a link to the support documentation. There’s a big section there, lots of different articles on how to set up and publish and customize interactive transcripts.

OK, so we’ll begin with the Q&A. We have a number of questions there. So there were actually a handful of questions that came in about translation.

Just to paraphrase all the questions, basically, if you do translate a video, and the translations are in the interactive transcript, are they accessible? How do they appear? And is it possible to search through them? Harriet, do you want to clarify that? Or Josh, do you want to explain that?

JOSH MILLER: So the search is basically a full text search. So what’s happening, whether it be the English or the translated version, is that once it’s queued up by the viewer, the search will be a real-time client-side search based on the text. So it’s going to pull up your search results in real time based on the transcript that is actually being displayed.

In terms of the different translation tracks that could be available, basically, the tracks have to be either in the 3Play system– or whatever, if you’re kind of doing things a little bit differently, if you customized the way the transcripts are served up. But by default, we would host the transcripts for you for all the languages, and then you’d be able to select which one you want to display.

You have two options to do that. We can either create the transcript and the translation, or we do have a service that allows you to import either transcripts or translation tracks into your account to make them usable with the interactive transcript.

TOLE KHESIN: Great, thanks for that. So there’s a question here about mobile, and how will this work on a mobile or tablets? Harriet, do you want to–

HARRIET OWERS-BRADLEY: Yeah, so the plugins will work on iPads and tablets as long as your video player will play. They do not work on an iPhone, because the video player always plays full screen. So that kind of ruins the experience, because you wouldn’t see any of the transcript.

TOLE KHESIN: Great, thank you. So there’s a question here. This probably relates to the implementation. But the question is, how do we do what MIT and Harvard did?

HARRIET OWERS-BRADLEY: Yeah, so if you are looking to do one of the demos that Josh showed you– maybe the MIT one or the Harvard one– the first thing you should do really is just contact us and kind of describe what it is that you exactly want to do. And then there’s a few different ways we could work with you to achieve that. It’s going to depend on the video player that you’re using, how advanced the customization is, whether you want to do the development work on your own, or if you want to completely hand it over to us for more of a professional services project.

TOLE KHESIN: Great, thanks. There are a few questions here about the cost or the price of using these interactive transcripts. Do one of you guys– Josh, do you want to talk about that?

JOSH MILLER: Sure, so most of the cost is really based on the transcription portion of the process in terms of us transcribing your content, captioning your content. We make the format available for the interactive transcripts.

The interactive transcripts alone don’t cost anything else. They’re included with the actual transcription fee. The archive search, the ability to allow you to search across the entire library at once, that does have a small additional cost. But it’s a pretty small fee for what it really is.

TOLE KHESIN: OK, great. There is a question here, would the plugin work with a video that’s embedded in a learning management system?

HARRIET OWERS-BRADLEY: Yeah, so an example of that might be Blackboard. So it really depends how you have your LMS set up and how it handles JavaScript. Because obviously, you need the JavaScript to work in a way that allows the plugins to work, too.

So generally, we say that if you can embed a video player onto your page within the LMS, then you should be able to embed the interactive transcript. I’ve seen the plugins working great in Blackboard before, so hopefully.

TOLE KHESIN: Awesome, awesome, thanks. So there’s a question here, are there any plans to enable this to work with transcripts created and stored outside of 3Play? I can answer this pretty quickly. Actually, Josh referred to this previously as well. But we recently launched a capability called Caption Import that allows you to import your existing captions into the 3Play Media platform.

If you have transcripts without any time coding information, you can import those as well, and we’ll synchronize them to create captions. So either way, you’ll be able to use these interactive transcripts if you have existing transcripts or captions.

All right, so there is a question here, is there a way to customize the plugin to work with other video players than the ones you have listed? Harriet, do you want to clarify that?

HARRIET OWERS-BRADLEY: Yeah, so the ones we have listed, we kind of guarantee that it’s going to work with those. If you’re using a different video player or HTML5 or something, I think the first thing to do really is just contact us. And then we’ll help you figure that out. It really just depends on the video player.

TOLE KHESIN: Great, thanks. So there are a couple questions here about SEO. Is the player consistently crawled by search engines? Is there specific evidence that there are SEO benefits for the interactive player?

JOSH MILLER: So the trick with SEO is that you need to get the text on the page itself. And there is a small extra step that needs to take place that goes beyond the plugin. But the plugin kind of makes it more elegant in terms of the way the text is being displayed on the page with the video rather than just a static transcript. So once that text is on the page, yes, it is consistently being crawled by search engines as long as your site is properly set up to be crawled. So it kind of gets into general SEO beyond just video SEO, and making sure that the page is set up properly.

TOLE KHESIN: Great, thanks. Someone is asking just a basic question. Where do the transcripts come from? And so just to clarify, so there are a number of options. You can just upload a video, and we can create the transcripts and captions from scratch. Or, as we mentioned before, if you already have the transcripts or captions, you can import those. So we can handle all of those different scenarios.

JOSH MILLER: We should add, if you have a transcript without timing, we have a service to synchronize the transcript to the video to enable all the same functionality as well.

TOLE KHESIN: Great, thanks. So we are going to wrap up. If we didn’t get to your question, we will reach out to you offline. I wanted to thank Harriet and Josh for a great presentation, and everyone who joined us today. And as we mentioned before, a recording of this webinar will be available tomorrow, and you will receive an email with a link to watch it. Thanks again, and hope you have a great day.