Given a web page, the task is to initiate the slider only after the video ends with JavaScript.
Syntax
In HTML:
<video onended="myScript">
In JavaScript:
1. Using custom function:
video.onended=function(){myScript};
2. Using the addEventListener() method:
video.addEventListener("ended", myScript);
Algorithm:
- 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.
- Get the element by its selector or class or id in JavaScript and use the DOM onplaying and onended events to perform slide only after the video ends.
Follow the Steps:
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.
Step 3: Add the JavaScript to allow the page to slide or scroll only after the end of the video.
- 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.
- We hide the page scroller hence not allowing the page to slide or be scrolled while the video is playing with the help of the onplaying function of JavaScript and the overflow property of CSS.
- We finally add our final yet most important piece of code. We use the onended function of JavaScript, remove the overflow being hidden property, use the scrollIntoView() function in JavaScript.
JavaScript code: Here, we remove the overflow property and enable the scroller when the video stops playing, and also scroll to the next element.
HTML
<!DOCTYPE html> <html> <body> <video id="Vid" width="320" height="176" controls> <source src= type="video/mp4"> Your browser does not support HTML5 video. </video> <div> <h2 id="next">Welcome to GeeksForGeeks</h2> <p class="text"> With the idea of imparting programming knowledge, Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream, neveropen. Whether programming excites you or you feel stifled, wondering how to prepare for interview questions or how to ace data structures and algorithms, neveropen is a one-stop solution. With every tick of time, we are adding arrows in our quiver. From articles on various computer science subjects to programming problems for practice, from basic to premium courses, from technologies to entrance examinations, we have been building ample content with superior quality. In a short span, we have built a community of 1 Million+ Geeks around the world, 20,000+ Contributors and 500+ Campus Ambassadors in various colleges across the nation. Our success stories include a lot of students who benefitted in their placements and landed jobs at tech giants. Our vision is to build a gigantic network of neveropen and we are only a fraction of it yet. </p> <p class="text"> With the idea of imparting programming knowledge, Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream, neveropen. Whether programming excites you or you feel stifled, wondering how to prepare for interview questions or how to ace data structures and algorithms, neveropen is a one-stop solution. With every tick of time, we are adding arrows in our quiver. From articles on various computer science subjects to programming problems for practice, from basic to premium courses, from technologies to entrance examinations, we have been building ample content with superior quality. In a short span, we have built a community of 1 Million+ Geeks around the world, 20,000+ Contributors and 500+ Campus Ambassadors in various colleges across the nation. Our success stories include a lot of students who benefitted in their placements and landed jobs at tech giants. Our vision is to build a gigantic network of neveropen and we are only a fraction of it yet. </p> </div> </body> </html> |
CSS
/* Increasing the size of video element */#Vid { height: 35rem; width: 50rem; } /* Aligning the content and text and adding really basic styling */body { align-items: center; text-align: center; color: green; } |
Javascript
var v = document.getElementById("Vid"); v.autoplay = true; v.load(); v.onplaying = function() { document.body.style.overflow = 'hidden'; }; // Executes only when the video ends v.onended = function() { // Enabling the scroller document.body.style.overflow = ''; // Scrolling to the next element by // linking to its Id document.getElementById("next").scrollIntoView(); }; |
Output: Click here to see live code output
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
