Open In App

How to slide down the page after video ends using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  1. Write the HTML part of the webpage and also add the Video.
  2. Add styling if needed using CSS or any of the front-end libraries.
  3. 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, GeeksforGeeks.
            Whether programming excites you or you feel
            stifled, wondering how to prepare for interview
            questions or how to ace data structures and
            algorithms, GeeksforGeeks 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 geeks
            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, GeeksforGeeks.
            Whether programming excites you or you feel
            stifled, wondering how to prepare for interview
            questions or how to ace data structures and
            algorithms, GeeksforGeeks 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 geeks
            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



Last Updated : 16 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads