Preloading large number of videos for online experiment

[steventmartinez]

Hi all, I am running into issues preloading ~200 videos for an online experiment. The videos are 15-30 seconds long, up to 15 MB each, and will be shown in blocks of 12 consecutive videos at a time.

I've tried 3 different strategies for preloading:
1) preloading one video prior to its presentation
2) preloading in batches
3) using third-party file storage services like Google Drive, YouTube, and Vimeo.

So far, each option has resulted in the experiment failing to load or a noticeable lag in between video presentations. I wanted to ask if anyone has used other strategies for preloading to really minimize the lag between video presentations? I would deeply appreciate any insights or advice -- thank you so much!

Attaching example code of the different options I have tried in case that would be helpful to see.

**Option #1: Preload 1 video at a time**
var block_1 = {
  timeline: [
    {
    type: jsPsychPreload,
    video: function () {
      return [`${jsPsych.evaluateTimelineVariable('video_pathway')}`]
    },
    max_load_time: 60000,
    show_detailed_errors: true
    },
  {
    type: jsPsychHtmlButtonResponse,
    stimulus: function(){
                var html = 
                '<video disableRemotePlayback autoplay src="'+jsPsych.evaluateTimelineVariable('video_pathway')+'"</video>' 
                return html;
            },       
    choices: ["option_1.png", 'option_2.png'],
        }
    ],
}

var block_1_procedure = {
    timeline: [block_1],
    timeline_variables: block_1_stim,
    };


**Option #2: Batch preloading**
var preload_block_1_stim = {
    type: jsPsychPreload,
    video: block_1_stim,
    max_load_time: 60000,
    show_detailed_errors: true
}

var block_1 = {
    type: jsPsychHtmlButtonResponse,
    stimulus: function(){
                var html = 
                '<video disableRemotePlayback autoplay src="'+jsPsych.evaluateTimelineVariable('video_pathway')+'"</video>' 
                return html;
            },       
    choices: ["option_1.png", 'option_2.png'],
        }

var block_1_procedure = {
    timeline: [block_1],
    timeline_variables: block_1_stim,
    };

var full_timeline = {
    timeline: [preload_block_1_stim, block_1_procedure, preload_block_2_stim, block_2_procedure, etc.]
}

[kurokida]

Hi,

I’ve never handled such a large volume of videos as in your experiment, and I don’t have any alternative ideas either.
My intuition is that Option 1 or 2 should work fine, so I’d like to double-check a few things.

1. Do you see any errors in the JavaScript console?
2. Is everything working fine when the number of videos is reduced?

Best regards,
Daiichiro

[steventmartinez]

Thank you for checking-in Daiichiro, I really appreciate it!

In response to your first question, I have the show_detailed_errors parameter set to 'true' in the jsPsychPreload plugin so the experiment outputs this error for all of the video files that failed to load successfully:

"Error loading file: stimuli/video1.mp4
File did not begin loading. Check that file path is correct and reachable by the browser,
and that loading is not blocked by cross-origin resource sharing (CORS) errors."

The Console window gives the following message: "Failed to load resource: net::ERR_FAILED" for each of the videos that failed to load.

In response to your second question, yes things usually work fine when I use less videos or preload less files. I think part of the issue is that preloading in batches of 12 videos may be too much, but the current task format is based on blocks of 12 videos.

I might try another round of compression to see if I can reduce the video files even further. I was just curious about other strategies that people are using to preload large numbers of videos so if there's any other approaches that you think would be worth trying, please let me know!

[kurokida]

Thank you for your prompt reply.

As the error message suggests, I recommend double-checking whether the file paths are correct. (I’ve also mistakenly assumed the paths in my own program were correct before.)
Regarding CORS, please make sure your program is running on a hosting server, not just locally on your PC. The preload function doesn't work properly on your local machine.

Based on my experience, loading 12 video files should work without any issues.

Best regards,
Daiichiro

[steventmartinez]

That's a good point about the file paths! I'll make sure to double check that.

In terms of CORS, I'm currently hosting the script on www.gitlab.pavlovia.org as I hope to run the experiment on Prolific. Is there anything I have to adjust in the preload code to account for CORS?

[kurokida]

I’ve never used Pavlovia before. To check whether the issue is related to Pavlovia, if possible, how about trying to run your program on Cognition instead?

Is there anything I have to adjust in the preload code to account for CORS?

I don’t think any special settings are needed for CORS.

[steventmartinez]

Ah I've actually never used Cognition before but I will look into it! Seems really user-friendly which is great.

That's also good to know that no special settings are needed for CORS. Thanks again for taking the time to help out Daiichiro! Much appreciated.