Question

I have a script that loads content using load() via a click function.

I’d like to change this to auto load content every one minute like a slideshow.

I have 3 videos I need to loop through.

Please can someone point me in the right direction I have no idea where to start. My current script is below.

Thanks

I have updated the code below, in accordance with elliot-bonneville answer. I still need to find a way to loop through these videos.

JS

// define var video
var video = $('div.video');
var linkOne = $('.video_1').attr('href');
var linkTwo = $('.video_2').attr('href');
var linkThree = $('.video_3').attr('href');

setInterval(function() {
// load content into video
video.load( linkTwo + ' .content' , function() {
    // remove loading text
    $('.load').remove();
});
}, 10000) // 60000 milliseconds = one minute

setInterval(function() {
// load content into video
video.load( linkThree + ' .content' , function() {
    // remove loading text
    $('.load').remove();
});
}, 10000) // 60000 milliseconds = one minute

setInterval(function() {
// load content into video
video.load( linkOne + ' .content' , function() {
    // remove loading text
    $('.load').remove();
});
}, 10000) // 60000 milliseconds = one minute

Answer 1

Use setTimeout

I think something like the below. I haven’t tested it yet, so there might be some syntax errors. But hopefully you understand. let me know if anything doesn’t make sense.

One reason I am using setTimeout rather setInterval is that this way, another timer doesn’t get fired until after the load has completed. In this case, it won’t matter too much as you are only doing it every 1 minute, but in some cases, the server latency might be more then the interval time. Also, this way, if for whatever reason, the script/server goes down and a successful reply isn’t received then another call won’t be made.

// define var video
var video = $('div.video');
var currentVid=1;
var maxVid=3;

setTimeout(cycleVideo, 10000) // 60000 milliseconds = one minute

function cycleVideo() {
    // load content into video
    var link = $('.video_'+currentVid).attr('href');
    video.load( link + ' .content' , function() {
        // remove loading text
        $('.load').remove();
        if(currentVid==maxVid) currentVid=1; else currentVid++;
        setTimeout(cycleVideo, , 10000) // 60000 milliseconds = one minute

    });
}