In this final lesson, I'm showing you how to add the finishing touch to our pizza course website: an end screen feature. This feature enhances the user experience by showing the next video in the course as the current video nears its end, and even allows for automatic playback of the next video.

I start by explaining the goal: when a video is almost finished, we want to display information about the next video and give the option for it to play automatically. This functionality is part of the mave player's end screen feature. I guide you through the mave documentation, showing you how to implement the end screen using a slot within the mave player. I explain some of the options available, such as showing the time remaining, displaying an image, and triggering the next video automatically.

Next, we move to implementing this in our code. I show you where to add the end screen HTML within the player component. The HTML I've prepared includes styling, displays the time remaining, shows a clickable image for the next video, and provides an option to restart the current video. I explain that to make this work properly, we need to add some custom JavaScript. This script handles the event when someone clicks on the image in the end screen, updating the player to the next video.

Finally, I demonstrate the result as a video nears its end, the end screen appears, showing information about the next video. When the current video finishes, it automatically transitions to the next one, creating a seamless viewing experience for our course.

Throughout this lesson, I'm emphasizing how this feature enhances the overall user experience of our course website. It keeps viewers engaged by providing a preview of what's coming next and makes it easy for them to continue watching without interruption. This final addition completes our pizza course website, creating a fully functional and user-friendly online learning platform.

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.