0

I am trying to figure out a way of playing back videos only after all 4 have loaded to a canplaythrough state. I was thinking of nesting functions to then come to a playClass function like below

var classVideos = document.getElementsByClassName("playbackVideos");

playVideos(){
    for(i=0; i<classVideos.length; i++){
        classVideos[i].play();
    }
}

loadVideos(){
    classVideos[0].oncanplaythrough = function(){
        classVideos[1].oncanplaythrough = function(){
            classVideos[2].oncanplaythrough = function(){
                classVideos[3].oncanplaythrough = function(){
                    playVideos();
                }
            }
        }
    }
}

The loadVideos() function would be called by a play button or eventListener on a seekbar with "mouseup".

Any help would be greatly appreciated.

Mitchell Day
  • 196
  • 2
  • 14
  • [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)s with [`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) – Andreas Apr 20 '18 at 05:02
  • Possible duplicate of [How can I wait for set of asynchronous callback functions?](https://stackoverflow.com/questions/10004112/how-can-i-wait-for-set-of-asynchronous-callback-functions) – Andreas Apr 20 '18 at 05:04
  • Any examples of how this might work. Never played with promises before. – Mitchell Day Apr 21 '18 at 05:21
  • From the first link: [Using promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises), and the duplicate has also some examples with promises - hence the duplicate ;) – Andreas Apr 21 '18 at 07:50

0 Answers0