fullpage.js上下滚动切换页面时如何实现视频重新从头播放

注意：你当前的HTML存在重复ID问题，两个<video>标签同时写了id="videoPlay"，全局ID重复会导致DOM选取异常，需要先删掉重复的id="videoPlay"属性，保留每个视频唯一的ID（slide1、slide2）即可。

修正后的基础HTML结构如下：

<div id="fullpage">
    <div class="section">
        <video style="object-fit: cover" 
        id="slide1" 
        tabindex="-1" 
        muted="muted" 
        data-autoplay
        webkit-playsinline 
        playsinline 
        class="my-video-scroll"
        data-no-fullscreen="true" 
        controlslist="nodownload" 
        loop 
        controls>
        <source src="../video/video1.mp4"></video>
    </div>
    <div class="section">
    <video style="object-fit: cover" 
        id="slide2" 
        tabindex="-1" 
        muted="muted" 
        data-autoplay
        webkit-playsinline 
        playsinline 
        class="my-video-scroll" 
        data-no-fullscreen="true" 
        controlslist="nodownload" 
        loop 
        controls>
        <source src="../video/video2.mp4"></video>
    </div>
</div>

核心实现逻辑 #

利用fullpage.js自带的afterLoad回调（区块完全滚动到视口后触发）完成逻辑处理：

• 遍历所有区块内的视频，将进度重置到0（currentTime = 0）并暂停，避免非可视区视频后台加载占用资源
• 找到当前激活区块内的视频，调用播放方法从头播放

对应的fullpage初始化代码如下，直接整合你原有的配置项即可：

new fullpage('#fullpage', {
  // 保留你之前写的其他fullpage配置，比如navigation、scrollingSpeed等
  afterLoad: function(origin, destination) {
    // 第一步：重置所有视频状态，回到起始帧并暂停
    const allVideos = document.querySelectorAll('.section video');
    allVideos.forEach(video => {
      video.pause();
      video.currentTime = 0; // 核心API：强制把视频进度拉回0秒位置
    })
    // 第二步：播放当前激活区块的视频
    const activeVideo = destination.item.querySelector('video');
    if(activeVideo) {
      // 视频已配置muted静音属性，不会触发浏览器自动播放拦截
      activeVideo.play().catch(err => console.log('播放异常:', err));
    }
  }
})

补充说明 #

• 如果你之前已经写了视频播放、暂停的相关逻辑，直接把video.currentTime = 0的重置逻辑加在区块切换的触发节点即可，不需要重复绑定事件
• 如果需要在滚动动画开始时（还没完全切换到下一个区块）就提前重置视频，可以把逻辑移到onLeave回调中，触发时机更早
• 若后续新增带视频的区块，不需要修改JS逻辑，代码会自动适配新的区块视频

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