Skip to content
Related Articles

Related Articles

How to slide down the page after video ends using JavaScript ?
  • Last Updated : 23 Feb, 2021

Given a web-page, and 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);

Example:

Javascript




var video = document.getElementById("GFG");
video.onended = function() {
    alert("The video has ended now");
};

Now, coming to our required functionality, we use this event to trigger the next slide only after the video has ended.

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.

Steps:

Step 1: Write the HTML markup and add the video element into your HTML file.

index.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>

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).

style.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;
}

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:

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();
};

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
  
        /* 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;
        }
          
        .text {
            margin: 0% 20%;
        }
    </style>
</head>
  
<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>
  
    <script>
  
        // Storing the video element through its id
        var v = document.getElementById("Vid");
  
        // Adding the autoplay feature
        v.autoplay = true;
        v.load();
  
        // Hiding the scroller while video is playing
        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();
        };
    </script>
</body>
  
</html>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :