jquery 自动滚动、播放视频、重启

Question

我有一个网页将使用 javascript video 嵌入文本和视频。我可以使用什么 javascript/jquery 代码以设置的速度向下滚动页面、停止滚动、播放视频，然后继续滚动直到页面底部重新开始？

编辑：我试过了 http://www.jquerybyexample.net/2013/05/jquery-scroll-page-automatically-by-few-pixels-after-every-few-seconds.html and http://jdsharp.us/jQuery/plugins/AutoScroll/ and http://jsfiddle.net/NaP8D/11/.

//run instantly and then goes after (setTimeout interval)

$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 4000); 
},4000);
setInterval(function(){
     // 4000 - it will take 4 secound in total from the top of the page to the bottom
$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 4000); 
},4000);

},8000);

我无法获得暂停其中任何一个的代码。

Answer 1

这应该让您大致了解您需要什么。没有一些 HTML 代码或更多 JS，我无法给出具体的答案。这里，#myVideo是视频的id。

// scrolls to the video
$("html, body").animate({ scrollTop: $("#myVideo").offset().top }, 4000);

// $("#myVideo") should return a video element
var video = $("#myVideo");

// called when the video/playlist ends
video.onended = function() {
     // scrolls to the bottom of the page
     $("html, body").animate({ scrollTop: $(document).height() }, 4000);
};

您将不得不稍微修改它以匹配您的代码。如果你想循环它：

while(1){
  $("html, body").animate({ scrollTop: $("#myVideo").offset().top }, 4000);
  var video = $("#myVideo");
  video.onended = function() {
    $("html, body").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
        $("html, body").animate({ scrollTop: $(0).height() }, 4000);
    },4000);
  };
}

jquery 自动滚动、播放视频、重启

jquery Scroll automaticly, play videos, restart

javascript

jquery

scroll

autoscroll

html5-video