视频播放结束后页面无法自动滚动，求排查解决方法

我是HTML、CSS、JS新手，想要实现视频播放结束后页面自动向下滚动，但目前无法实现该功能。不确定是JavaScript代码存在问题，还是HTML、CSS有错误（已附上相关代码片段），也曾尝试过其他写法但均无效，恳请帮忙解决。

现有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代码 #

<!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代码 #

/* ---- 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;
}

尝试过的无效代码 #

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

问题解决方法 #

核心问题分析 #

• 原代码中ended函数仅定义但未绑定到视频的ended事件，永远不会被触发
• 尝试的代码中使用了未定义的变量v，且页面中没有id="next"的元素
• 视频播放结束后，scrollPlay函数仍在强制修改currentTime，可能干扰结束逻辑

修改后的JavaScript代码 #

var frameNumber = 0,
playbackConst = 1000,
setHeight = document.getElementById("set-height"),
vid = document.getElementById('v0');

// 动态设置页面高度
vid.addEventListener('loadedmetadata', function() {
  setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
})

// 滚动控制视频播放的逻辑
function scrollPlay(){
  var frameNumber  = window.scrollY/playbackConst;
  // 视频结束后不再强制修改播放进度
  if (frameNumber < vid.duration) {
    vid.currentTime = frameNumber;
  }
  window.requestAnimationFrame(scrollPlay);
}

// 视频结束时的滚动逻辑
function handleVideoEnd() {
  // 平滑滚动到section3区域，也可替换为固定位置：window.scrollTo({top: 1000, behavior: 'smooth'})
  document.querySelector('.section3').scrollIntoView({
    behavior: 'smooth'
  });
}

// 绑定视频结束事件
vid.addEventListener('ended', handleVideoEnd);

// 启动滚动播放逻辑
scrollPlay();

额外说明 #

• 确保视频文件路径正确，能正常加载播放
• 测试时可直接拖动视频进度条到末尾，快速验证触发逻辑
• 若不需要平滑滚动，移除behavior: 'smooth'参数即可

内容的提问来源于stack exchange，提问作者Default Adam