Chase Cromwell Chase Cromwell - 5 years ago 366
Javascript Question

jquery Scroll automaticly, play videos, restart

I have a single webpage that will have text and videos embedded using javascript video. What javascript/jquery code can I use to scroll down the page by a set speed, stop scroling, play a video, and then continue scroling until the bottom of the page where it restarts?

Edit:
I have tried 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);


I have not been able to get the code to pause on any of them.

Answer Source

This should give you a rough idea of what you need. Without some HTML code or more JS, I can't give a specific answer. Here, #myVideo is the id of the video.

// scrolls to the video
$("html, body").animate({ scrollTop: $("#myVideo").height() }, 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);
};

You're going to have to modify it slightly to match your code. If you want to loop it:

while(1){
  $("html, body").animate({ scrollTop: $("#myVideo").height() }, 4000);
  var video = $("#myVideo");
  video.onended = function() {
    $("html, body").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
        $("html, body").animate({ scrollTop: $(0).height() }, 4000);
    },4000);
  };
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download