Question 218224 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript: Page not scrolling down after video ended

I am new to HTML, CSS, JS, and I am trying to make the page scroll down after the video finishes playing. Please tell me what I am doing wrong?

I am not sure if I am doing something wrong with the javascript code, or if something is wrong in my HTML and CSS (which i included the relevant parts for, i think atleast lol)

Javascript:

  var frameNumber = 0, // start video at frame 0
  // lower numbers = faster playback
  playbackConst = 1000,
  // get page height from video duration
  setHeight = document.getElementById("set-height"),
  // select video element
  vid = document.getElementById('v0');
  // var vid = $('#v0')[0]; // jquery option

//dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
  setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
})

// Use requestAnimatioNFrame for smooth playback
function scrollPlay(){
  var frameNumber  = window.scrollY/playbackConst;
  vid.currentTime  = frameNumber;
  window.requestAnimationFrame(scrollPlay);
}

function ended(){
  if (vid.currentTime >= vid.duration){
    window.scrollTo(0,1000);
  };
  
scrollPlay();}

HTML (incase):

<!DOCTYPE html>
<!-- from https://youtu.be/FazgJVnrVuI -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Techsite" content="width=device-width, initial-scale=1.0" /> 
    <title>Techsite</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <section class="section1">
            <nav class="navbar">
                <div class="navbar_container">
                    <a href="/" id="navbar_logo">Techsite</a>
                    <div class="navbar_toggle" id="mobile-menu">
                        <span class="bar"></span>
                        <span class="bar"></span>
                        <span class="bar"></span>
                    </div>
                    <ul class="navbar_menu">
                        <li class="navbar_item">
                            <a href="/" class="navbar_links"> Home </a>
                        </li>
                        <li class="navbar_item">
                            <a href="/tech.html" class="navbar_links"> About </a>
                        </li>
                        <li class="navbar_item">
                            <a href="/services" class="navbar_links"> Services </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </section>
            
        <!--https://www.videvo.net/video/hologram-planet/4743/-->
        <section class="section2">
            <div id="set-height"></div>
            <video id="v0" width="1920" height="950" tabindex="0" preload="auto", autoplay muted >
                <source type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' src="Hologram_Planet_by_nuva.mov"></source>
            </video>
        </section>

        <section class="section3">
            <!-- particles.js container -->
            <div id="particles1-js"></div> <!-- stats - count particles -->
            <!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
            <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- stats.js lib -->
            <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
        </section>



        <script src="app.js"> </script>
    </body>
</html>

CSS (incase):

/* ---- reset ---- */
body {
    margin: 0;
    font: normal 75% Arial, Helvetica, sans-serif;
  }
  canvas {
    display: block;
    vertical-align: bottom;
  } /* ---- particles.js container ---- */
  #particles1-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: -1;

  } /* ---- stats.js ---- */
  .count-particles {
    background: #000022;
    position: fixed;
    top: 48px;
    left: 0;
    width: 80px;
    color: #13e8e9;
    font-size: 0.8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
  }
  .js-count-particles {
    font-size: 1.1em;
  }
  #stats,
  .count-particles {
    -webkit-user-select: none;
    margin-top: 5px;
    margin-left: 5px;
  }
  #stats {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
  }
  .count-particles {
    border-radius: 0 0 3px 3px;
  }
  

#set-height {
display: block;
height: 10500px;
}

#v0 {
position: absolute;
top: 0;
left: 0;
width: 100%;
object-fit: cover;
z-index: 1;
}

p font-family Helvetica, Arial, sans-serif {
font-size: 24px;
}

I have tried different things like using this:

        v.onended = function() {
        
            // Enabling the scroller
            document.body.style.overflow = '';
        
            // Scrolling to the next element by
            // linking to its Id
            document.getElementById("next").scrollIntoView();
        };

but nothing works, please help 🙁

Tags:

3

Answers


  1. 0

    I can’t see anywhere, where you are calling the JS function ended.

    I would recommend put the ended function into a setInterval (https://developer.mozilla.org/en-US/docs/Web/API/setInterval)

    function video_close_timer() {
    var videoTimer = 1000; // Check if the video ended every second
    var timerId = undefined; // The ID of the Interval
    timerId = setInterval(function() {
        if (video_closed_scrollPlay()) {
            clearInterval(timerId);
            timerId = undefined;
        };
    }, videoTimer);
};

function video_has_closed() {
    if (vid.currentTime >= vid.duration) {
        window.scrollTo(0, 1000);
        return true;
    };
    return false;
};

function video_closed_scrollPlay() {
    var result = video_has_closed();
    scrollPlay();
    return result;
};

function ended() {
    return video_closed_scrollPlay();
};

    Call the function video_close_timer when your video starts.

    Login or Signup to reply.
  2. 0

    I would try using an event listener like so:

    document.getElementById('myVideoIdHere').addEventListener('ended', function() {

        document.body.style.overflow = 'scroll';
        document.getElementById("next").scrollIntoView();

});
    Login or Signup to reply.
  3. 0

    Try calling the function with a eventlistner

    function ended(){
  if (vid.currentTime >= vid.duration){
    window.scrollTo(0,1000);
  };

scrollPlay();}

vid.addEventListener('ended',()=>ended());
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search