1. Using custom function:
2. Using the addEventListener() method:
Now, coming to our required functionality, we use this event to trigger the next slide only after the video has ended.
- Write the HTML part of the webpage and also add the Video.
- Add styling if needed using CSS or any of the front-end libraries.
Step 1: Write the HTML markup and add the video element into your HTML file.
Here, I’ve used the video element and source element of HTML to keep it precise and controllable. I’ve used a stock video for reference here.
Step 2: Adding the styling in the CSS file (or any other as per your choice).
The CSS is completely personalized and optional and we can add styling according to our taste.
- We add the autoplay feature to our video so that the video is played to the user as soon as they enter the page. A good practice is to mute the video if it’s on autoplay. My video does not contain a sound here so I have not used it.
Here, we remove the overflow property and enable the scroller when the video stops playing, and also scroll to the next element.
Final Code: Here is the full HTML code for the whole thing