jquery Scroll automaticly, play videos, restart

Question

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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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);
  };
}

jquery Scroll automaticly, play videos, restart

Sign up