In this lesson, I'm introducing you to mave's text component, which allows us to display the transcript of a video alongside the player. This feature enhances the functionality of our pizza course page by providing written content to accompany the video lessons.

I start by explaining that mave isn't just about video playback, but also about everything surrounding video content.I show you how mave automatically generates subtitles for uploaded videos and how you can manage these subtitles, including downloading, re-uploading, removing, and adding subtitles in different languages. Next, I introduce the mave text component.

I demonstrate how simple it is to implement - it uses the same embed ID as the video player, making it easy to connect the transcript to the correct video. I explain some of the default options of the text component, such as auto-scrolling and highlighting.

I also point out that when used on the same page as a mave player with the same embed ID, the text becomes clickable and integrates with the player. We then move to implementing this in our course page. I guide you through adding the text component to our HTML, placing it where we want the transcript to appear.

I address a potential issue: our first video doesn't have a transcript. To solve this, I show you how to modify our JavaScript to update both the player and the text component when a user selects a different video from our list.

Finally, I demonstrate the result: a fully functional course page with a video player, a list of course videos, and a synchronized transcript that highlights the current spoken text and allows users to jump to specific parts of the video by clicking on the transcript.

Throughout this lesson, I'm emphasizing how these features work together to create a more comprehensive and accessible learning experience for our pizza course students. The addition of the transcript not only provides an alternative way to consume the content but also enhances the interactivity of our course page.

Mentor

David van Leeuwen is a web developer with over 15 years of experience. Throughout his career, he has collaborated with multidisciplinary teams on projects for renowned companies such as Sonos, WeTransfer, and Red Bull.

David is currently leading the development of mave and will be the mentor if this course. He is enthusiastic about sharing his knowledge and helping you get started with video integration.