In this lesson, we're building on what we've done in previous lessons, adding more advanced features to create a fully functional course page. I start by showing you the current state of our lesson page, which is still quite bare. Our goal is to add a video player and a list of all available videos.

First, I demonstrate how to add the main video player to the page. Instead of copying the full embed code, I show you how to add just the script tag at the top of the page, as we'll be using multiple mave components. Next, I introduce the list component, which allows us to display all available videos. I explain that using this component requires some specific markup and JavaScript, as well as a JWT (JSON Web Token) for security reasons.

I walk you through the process of setting up a collection in the mave dashboard for our pizza course videos. I show you how to get the collection ID and create a JWT using jwt.io. I also demonstrate how to generate an API key from the mave dashboard. With these pieces in place, I guide you through adding the necessary HTML markup for the list component. I show you how to customize the display of list items, including the title, duration, and a custom icon.

I then explain how to add the JWT to our markup and demonstrate how this results in our list of videos appearing on the page. To improve the user experience, I show you how to adjust the order of videos in the list and make them clickable. This involves adding some JavaScript to handle click events on list items, updating the main video player when a video is selected.

Throughout the lesson, I'm emphasizing how these features work together to create a more interactive and user-friendly course page. By the end of the lesson, we have a functional page with a main video player and a clickable list of all course videos, allowing users to easily navigate through the course content.

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.