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

JavascriptProgramming ScriptsWeb DevelopmentFront End Technology

In this tutorial, we will learn about a method that will slide down the web page when a video will get ended using JavaScript. We will check if the video is ended using the "onended" DOM property. We will also apply some CSS to style the video tag. Let’s understand first what is the onended property.

What is the video onended property?

The video onended property is read-only DOM property that checks and returns if the audio/video which is being played has ended.

To check if the video ended it takes the playback position and constantly checks if the position is at the end of the audio/video.

The video ended properly returns true if the video has ended else it returns false.

Let’s design the webpage using HTML and CSS then we will select the element using a selector and the apply slider function code to the video when it will be ended.

Steps

We should follow the below steps to slide down the page after the video ends using JavaScript −

Step 1 − Design webpage using HTML elements.

Step 2 − Apply CSS styling to design the HTML content.

Step 3 − Apply onended property and when the video is ended

Step 4 − Call function to scroll the webpage to next element.

Let’s discuss in details the above steps.

Step 1. Design webpage using HTML elements

Let’s design a simple webpage using the HTML elements. Below is a simple HTML webpage. We have added different paragraph tags and a <video> tag to embed the video.

<html> <head> <title>Slide down page after video ended</title> </head> <body style=" align-items: center; text-align: center;"> <h2 style="color: black;">Slide down page after video ended</h2> <p>Press play and wait for the video to end to slid down the page.</p> <video id="video_id" width="320" height="176"> <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4"> </video> <div id="block"> <p>This is an example of how to embed a video and scroll after the video is ended.</p> <br><br> <p>video will be loaded on the webpage using video tag</p> <br><br> <p>if video is ended then we will call the function named as myFunction</p> <br><br> <p>in the myFunction we will take id of the division tag below then video and apply the scroll property</p> <br><br> </div> </body> </html>

Step 2. Apply CSS styling to design the HTML content

Now let’s add some CSS for video.

<style> #video_id { height: 30rem; width: 40rem; } </style>

Step 3. Apply onended property and when the video is ended

Now we apply the onended property when the video is ended. We assign this property to myFunction(). This function is triggered when the video is ended.

<video id="video_id" width="320" height="176" controls onended="myFunction()"> <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4"> </video>

Step 4. Call function to scroll the webpage to next element.

Now we will apply controls to display pause, resume, volume controls over the video and then we will add onended DOM property and call the function named as myFunction when video is ended.

Using onended="myFunction()” inside the video tag.

Let’s write the myFunction() JavaScript code to do the certain action of scrolling the web page when the video will be ended.

Below is the JavaScript function used to slide down the page when the video ends.

<script> function myFunction(){ var block=document.getElementById("block"); document.body.style.overflow = ''; block.scrollIntoView(); } </script>

Here we are taking the id of block, which is div block below the video, when the video ends it will scroll the page to the content where Id is “block”.

To slide down the page we are using scrollIntoView() which is an element class method that lets us scroll the current element on the webpage to viewing portion of the window.

Example

Below is the complete implementation of the above steps to slide down the page using after video ends using JavaScript.

<html> <head> <title>Slide down page after video ended</title> <style> #video_id { height: 30rem; width: 40rem; } </style> </head> <body style=" align-items: center; text-align: center;"> <h2 style="color: black;">Slide down page after video ended</h2> <p>Press play and wait for the video to end to slid down the page.</p> <video id="video_id" width="320" height="176" controls onended="myFunction()"> <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4"> </video> <div id="block"> <p>This is an example of how to embed video and scroll after video is ended .</p> <br><br> <p>video will be loaded on the webpage using video tag</p> <br><br> <p>if video is ended then we will call the function named as myFunction</p> <br><br> <p>in the myFunction we will take id of the vidision tag below then video and apply the scroll property</p> <br><br> </div> <script> function myFunction() { var block = document.getElementById("block"); document.body.style.overflow = ''; block.scrollIntoView(); } </script> </body> </html>

So, this was the method to slide down the web page after video ends.

raja
Updated on 11-Oct-2022 08:20:15

Advertisements