用于视频滚动的 Javascript 代码

Question

<分区>

Answer 1

我制作这个 jsfiddle 是为了进行实验并为您提供一个具体示例 http://jsfiddle.net/www139/14mgca3q/ .我使变量名非常详细，以提供对代码正在做什么的切实理解。为了平滑滚动，使用 jquery animate with scrolling (just google it)。 这也是一个代码片段；)

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 借来了很酷的视频(顺便说一句，非常酷的视频)。