What You Need to Know to Take Your Video UX to the Next Level
Updated: June 3, 2019
You may know that closed captions improve the user experience for viewers, resulting in longer watch time and higher engagement.
You may also know that including a transcript with your video makes your videos searchable and easily navigable.
And you should definitely know that an interactive transcript does all of those things and more.
What you may not know is that we’ve released a new code library for our interactive transcript plug-in that lets you customize the viewer experience, match your brand’s look and style, and tailor the code for the best viewer experience.
Webinar on Using Our Custom Code
3Play Media’s CTO CJ Johnson and Product Engineer Lanya Butler gave a live demo of the Plugin SDK that lets you take your video UX to new heights.
Watch a recording of the webinar here:
Make Your Interactive Transcript Responsive
The major driver for building the Plugin SDK was the emergence of responsive web design (see demo above).
These new developer tools make the interactive transcript flexible and adaptable to different experiences across desktop and mobile devices.
Since the layout is now in your hands, you can use any existing responsive design frameworks, such as Bootstrap or Foundation, to plug the interactive transcript components right into your web page.
For example, when you shrink the screen to simulate mobile viewing, you can set it to remove the ‘Download transcript’ option, since you wouldn’t typically download a transcript to your phone. You can also hide or rearrange other elements like the progress bar, search bar, etc.
7 Cool Things You Can Do to with the Plugin SDK
The Plugin SDK lets you customize your interactive transcript to make it more engaging and on-brand. For example, now you can:
- Change the color of the highlighted words to match your site’s color scheme.
- Adjust the color of your progress bar.
- Set a default file type for downloadable transcripts (PDF or TXT).
- Display a key icon [ ] to instantly see keywords in the transcript enlarged or shrunken based on their relative importance. This is great for scanning a transcript to see what a video is about.
- Enable or disable auto-scrolling of the interactive transcript by clicking the lock icon [ ].
- Customize the wording and appearance of the Download Transcript button.
- Move the position of the progress bar above or below the interactive transcript.
And that’s only the beginning…
Demo: Peter Rabbit Audio Book
With the ability to customize your own layout, styling, and user event handling, you can make some really cool stuff.
Lanya demonstrated a more advanced example of Plugin SDK customization, since we’ve only just scratched the surface of what is possible.
An audiobook is a really fun way to use timed text, so she built an interactive children’s audiobook of Peter Rabbit.
In the above video, Lanya explains how she made the audiobook interactive and engaging:
To build this out, we used the Plugin SDK with a LibriVox recording that’s playing on an HTML5 audio player. And then we used turn.js for the book visualization.
In this example the layout and CSS are both pretty intensive. But to get the book flipping at the appropriate time, we used custom event handles thrown by the Plugin SDK interactive transcript to get the timing right. So once the page is loaded, the Plugin SDK library is listening for a bunch of different things that are happening on the page. If a user clicks a word or searches in the transcript, we can build on one of those events and use the data to do really interesting things.
In this case, each time the current word is highlighted in the transcript, the Plugin SDK lets us know which word got highlighted and the timing of the word in that audio track. We can use that to figure out when we should be turning the pages and what page to turn to.
Start Coding with the Plugin SDK
For more information on how to code with the Plugin SDK, check out the Plugin SDK Overview support document to get it set up.
The Plugin SDK Interactive Transcript Features support doc has all the details about customizing individual features in your interactive transcript UI and UX.
3 Tips for Taking Conferences and Events Online
WAIT! Before you cancel your upcoming event, have you considered taking it online? Finding ways to connect online has become more important than ever before. But the community you build offline can translate just as well online. With a little planning and…
Join Faces Behind the Screen and #SignYourThanks
This Thanksgiving, we are challenging you to join 3Play Media and Faces Behind the Screen to #SignYourThanks! Why should you participate in this challenge? The goal of this campaign is to express gratitude and offer support for the Deaf and Hard of…
A Deep Dive Into Accessibility Laws with Lainey Feingold
In this deep dive, we revisit Lainey Feingold’s ACCESS presentation on how to navigate the world of accessibility laws. At ACCESS 2019, we were joined by legal rebel Lainey Feingold. Lainey is an internationally recognized disability rights lawyer and pioneer of Structured…