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.