如何使用 JavaScript 在视频结束后向下滑动页面？

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

句法

在 HTML 中：

在 JavaScript 中：

1.使用自定义函数：

video.onended=function(){myScript};

2. 使用 addEventListener() 方法：

video.addEventListener("ended", myScript);

例子：

Javascript

var video = document.getElementById("GFG");
video.onended = function() {
    alert("The video has ended now");
};

现在，来到我们所需的功能，我们使用此事件仅在视频结束后触发下一张幻灯片。

算法：

1. 编写网页的 HTML 部分并添加视频。
2. 如果需要，使用 CSS 或任何前端库添加样式。
3. 在 JavaScript 中通过其选择器或类或 id 获取元素，并使用 DOM onplaying 和 onended 事件仅在视频结束后执行幻灯片。

脚步：

第 1 步：编写 HTML 标记并将视频元素添加到您的 HTML 文件中。

索引.html

  

  
    
      
    

        
Welcome to GeeksForGeeks
  
        

            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.
        
  
        

            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.
        
    

  

在这里，我使用了 HTML 的 video 元素和 source 元素来保持它的精确性和可控性。我在这里使用了一个股票视频作为参考。

第 2 步：在 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;
}

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

第 3 步：添加 JavaScript 以允许页面仅在视频结束后滑动或滚动。

• 我们为视频添加了自动播放功能，以便用户一进入页面就可以播放视频。如果视频处于自动播放状态，则最好将其静音。我的视频在这里没有声音，所以我没有使用它。
• 我们隐藏了页面滚动条，因此在播放视频时，借助 JavaScript 的onplaying函数和 CSS 的溢出属性，不允许页面滑动或滚动。
• 我们终于添加了我们最后但最重要的一段代码。我们使用 JavaScript 的onended函数，去除溢出的隐藏属性，使用 JavaScript 中的scrollIntoView()函数。

JavaScript 代码：

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

在这里，我们删除了溢出属性并在视频停止播放时启用滚动条，并且还滚动到下一个元素。

最终代码：这是整个事情的完整 HTML 代码

HTML

  

    
  
        /* 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;
        }
          
        .text {
            margin: 0% 20%;
        }
    

  

  
    
        
        Your browser does not support HTML5 video.
    
      
    
        Welcome to GeeksForGeeks
  
        
            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.
        
  
        
            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.
        
    
  
    
  
        // Storing the video element through its id
        var v = document.getElementById("Vid");
  
        // Adding the autoplay feature
        v.autoplay = true;
        v.load();
  
        // Hiding the scroller while video is playing
        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();
        };
    

  

输出：