播放结束后,如何使背景视频自动向下滚动?因此,客户端可以在不触摸鼠标的情况下自动查看下一步的内容。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="vp8, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>
<div id="afterContent">
This is the div with the content.
</div>
我从@codelove那里借来了这个很酷的视频(顺便说一句,非常酷的视频)。