JavaScript 如何在视频结束后滑动页面

给定一个网页，任务是仅在视频结束后使用JavaScript启动滑块。

语法

在HTML中：

<video onended="myScript">

在JavaScript中：

1. 使用自定义函数：

video.onended=function(){myScript};

2. 使用addEventListener()方法：

video.addEventListener("ended", myScript);

步骤：

编写网页的HTML部分，并添加视频。
如有需要，使用CSS或前端库进行样式设置。
使用JavaScript中的选择器、类别或ID获取元素，并使用DOM的onplaying和onended事件，在视频结束后执行幻灯片播放。

过程：

第一步： 编写HTML代码，并将视频元素添加到HTML文件中。

在这里，我使用了HTML的视频元素和源元素，以保持精确和可控。我在此处使用了一个参考的库存视频。

第二步： 在CSS文件（或其他任何你选择的文件）中添加样式。

CSS可以完全个性化，是可选择的，我们可以根据自己的喜好添加样式。

第三步： 添加JavaScript使页面只能在视频播放结束后滑动或滚动。

我们给视频添加了自动播放功能，这样用户进入页面时视频会自动播放给用户。一个好的做法是将视频静音，如果它是 自动播放。 我的视频在这里没有声音，所以没有使用它。
我们隐藏页面滚动条，这样在视频播放时不允许页面滑动或滚动，使用的是JavaScript的 onplaying 函数和CSS的 overflow 属性。
最后我们添加最终而至关重要的代码。我们使用JavaScript的 onended 函数，在视频结束后移除overflow隐藏属性，并使用JavaScript的 scrollIntoView() 函数滑动至下一个元素。

JavaScript代码： 在这里，我们在视频停止播放时移除overflow属性并启用滚动条，并滚动到下一个元素。

HTML代码

<!DOCTYPE html> 
<html> 
  
<body> 
  
    <video id="Vid" width="320" height="176" controls> 
            <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210219152742/video.mp4"
                    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>

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

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

输出:

JavaScript 如何在视频结束后滑动页面