用于视频滚动的Javascript代码

Javascript code for video scrolling

本文关键字：Javascript 代码 滚动 视频 用于      更新时间：2023-09-26

播放结束后，如何使背景视频自动向下滚动？因此，客户端可以在不触摸鼠标的情况下自动查看下一步的内容。java脚本代码是什么？

我制作这个jsfiddle是为了进行实验，并为您提供一个具体的例子http://jsfiddle.net/www139/14mgca3q/.我将变量名称做得非常详细，以便对代码的作用有切实的了解。对于平滑滚动，使用jquery animate和滚动（只需谷歌）。这也是一个代码片段；）

window.addEventListener('load', function() {
  var video = document.getElementById('video');
  var element = document.getElementById('afterContent');
  video.onended = function() {
    //the video ended
    //get the distance between the element and the top of the document.
    var scrollDistance = document.body.scrollTop;
    var elemRect = element.getBoundingClientRect();
    var elemOffsetViewportDistance = elemRect.top;
    var totalOffset = scrollDistance + elemOffsetViewportDistance;
    window.scrollTo(0, totalOffset);
  };
});
html,
body {
  margin: 0;
  padding: 0;
}
#afterContent {
  position: relative;
  top: 100vh;
}
<video id="video" tabindex="0" autobuffer="autobuffer" controls preload="preload">
  <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
  <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
  <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
  <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>
<div id="afterContent">
  This is the div with the content.
</div>

我从@codelove那里借来了这个很酷的视频（顺便说一句，非常酷的视频）。

相关文章：