What You Need to Know to Take Your Video UX to the Next Level
Updated: January 4, 2018
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.
Introducing the Expiring Editing Link!
We are so excited to announce the Expiring Editing Link! Now you can give non-3Play users access to specific files, without having to give them your 3Play username and password. What is the Expiring Editing Link? The Expiring Editing Link (EEL) is…
Adding Videos with Captions and Transcripts to LMS Platforms
Accessibility Tools in LMS Learning management systems (LMS) usually don’t allow users to publish videos with captions, interactive transcripts, or audio description. This poses a challenge, especially in higher education and eLearning, as these features make content accessible and have many benefits…
[PRODUCT UPDATE] Audio Description Version Two Is Here!
It’s been several months since we first released audio description, and we have some exciting updates! We’ve released an extended audio description option and 3Play’s Recommendation feature. In addition, we’ve made updates to the editing interface, our audio description plugin, and API…