What You Need to Know to Take Your Video UX to the Next Level
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 P3SDK 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 P3SDK 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 P3SDK
The P3SDK 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 P3SDK 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:You can click on the timeline to flip open the book. And you can click pretty much anywhere in the interactive transcript below or in the book to sync the audio and the text.
To build this out, we used the P3SDK 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 P3SDK interactive transcript to get the timing right. So once the page is loaded, the P3SDK 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 P3SDK 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 P3SDK
For more information on how to code with the P3SDK, check out the P3SDK Overview support document to get it set up.