I'm running a web-based experiment in which people have to view 100 2-second-long videos (each around 200kb in size) one after the other. It is very important that there is no lag between videos, and so I am preloading them before the experiment starts using preload.js. The experiment begins when all the videos are loaded 100%.
However, this is problematic for some people, who say that the preload is causing their browsers to crash. I'm guessing this is because of a RAM issue?
What might be a good way to go about resolving this problem? Is loading videos in this fashion bad practice (how much data can I preload safely)?
It remains unclear from your question whether it's the actual preload process or a memory issue that is crashing viewers browsers.
Another strategy would be to progressively load the next video in the group at the beginning of the current video and play it when the onended event has been triggered.
Here's some pseudo-code that might help you get started:
var loadNext, videoGetTime;
videoGetTime = function(ele, callback) {
var loading, video;
video = $(ele);
loading = false;
video.on('timeupdate', function(e) {
var currentTime;
currentTime = e.originalEvent.target.currentTime;
if (currentTime >= (video[0].duration / 2) && !loading) {
callback();
loading = true;
}
});
};
loadNext = function() {
alert('loading next');
};
videoGetTime('#video', loadNext);
and then
video.on('ended', function(e){
//play the next video in the set
});