📌  相关文章
📜  如何使用 JavaScript 在视频结束后向下滑动页面?

📅  最后修改于: 2021-11-06 11:29:02             🧑  作者: Mango

给定一个网页,任务是仅在视频以 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");
};


index.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.         

    
  


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


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.         

    
          


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

算法:

  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



  

    

  

  
    
      
    
        

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.         

    
          

输出: