Manual preloading of videos not working

[m-guseva]

Hello!

I hope I'm not abusing this discussion forum with my stupid preloading questions..
The goal is to run an experiment where 100 videos (3mb each, mp4) are shown to the participant.
Actually the goal is to split the videos into 4 parts and preload them at varios points during the experiment.

Special thanks to Vijay for pointing me to the jsPsych.pluginAPI.preloadVideo module.
As I was implementing it I thought that it worked like a charm.
But after testing it on people's computers with bad internet connection I have realized that the preloading is not working at all, even though it goes through the procedure. In the end when it comes to play the video, it won't play and freeze while buffering (as if no preloading every happened)

This is my code. For testing purposes I'm trying to run this with two videos, one is in the preloading pipeline and the other isn't (so I can see whether the code makes any difference at all)

timeline = []
videos_vw1 = ['videos/talk11_a_0.mp4']

    var preload1 = {
        type: "call-function",
        async: true,
        func: function (done) {
            jsPsych.getDisplayElement().innerHTML = '<p>Loading... Please wait.</p>'
            jsPsych.pluginAPI.preloadVideo(videos_vw1, function () {
                alert("Preloading 1 done")
                done({ preload: "success" });
            })
        }
    };

    //Function to jump to next trial when video ends
    function vidend() {
        jsPsych.finishTrial()

    }

var videoplayback1 = {
        type: 'html-keyboard-response',
        data: { stimulus_type: 'end screen' },
        stimulus: function () {
            html = `<div class="grid-containerVidCross">
  <div class="videoCross" style="font-size:60px;cursor: none"><video autoplay muted onended="vidend()" id="vid" width="600">
 <source src="`+ 'videos/talk11_a_0.mp4' + `" type="video/mp4" id="vid"> </video></div>`
            return html;
        },
    };

    var videoplayback2 = {
        type: 'html-keyboard-response',
        data: { stimulus_type: 'end screen' },
        stimulus: function () {
            html = `<div class="grid-containerVidCross">
  <div class="videoCross" style="font-size:60px;cursor: none"><video autoplay muted onended="vidend()" id="vid" width="600">
 <source src="`+ 'videos/talk16_t_2_mns.mp4' + `" type="video/mp4" id="vid"> </video></div>`
            return html;
        },
    };

timeline.push(preload1, videoplayback1, videoplayback2)

This works all fine for very good internet connections but slower ones, both videos freeze and buffer regardless of preloading or not. I looked at what happens in the network tab in firefox and there I saw that during preloading the talk11_a_0.mp4 shows with status 200 during preloading and then with status 206 during playback.

Looking at this tab I'm guessing that maybe the preloading itself works, but when it comes to video playback the browser doesn't seem to use the preloaded information? Or it is lost somewhere?

Thank you so much for the help!

[jodeleeuw]

This is a great issue to raise. You're definitely not abusing the forum!

It's going to take a little bit of digging to figure out if this is something on our end. Tagging @andytwoods in because he wrote the code to do video preloading. (But no worries if you are too busy to look at this Andy!)

[vijaymarupudi]

Your html stimulus wouldn't include a <source> sub element. You should just include a video tag with a unique id with no source.

In the on_loaded callback, you would run code like this:

jsPsych.getDisplayElement().querySelector('#my-video-id').src = jsPsych.pluginAPI.getVideoBuffer('path/to/video');

[m-guseva]

I tried this:

    var test = {
        type: 'html-keyboard-response',
        on_load: function(){
         jsPsych.getDisplayElement().querySelector('#my-video-id').src = jsPsych.pluginAPI.getVideoBuffer('videos/talk11_a_0.webm')
        },
        stimulus:  `<div> <video id="my-video-id"></div>`,
    };

timeline.push(test)

However, nothing happens on the screen, the network tab tells me 404 error code that no media was loaded. Is there an error in the code?

[vijaymarupudi]

Are you preloading the video first?

[m-guseva]

Ah, yes you're right I haven't done that. It all works wonderfully now, thank you!!

[vijaymarupudi]

You're welcome!

[andytwoods]

Hi,
The freezing video is a bit odd. Does this happen in other browsers? Can you try in an anonymous tab?
Does the video still freeze if you are only loading one video? Does it work with 10 videos... With X videos.
The periodic preloading of future content is a really interesting idea. You could consider a buffering tool where preloading goes on in the background as the trials are run, with video for early trials preloaded first.
Afraid I can't devote time to debugging. Happy to offer insight though.
Best Andy

[m-guseva]

Yes, it happens in other browsers (I excluded Safari for the experiment though). And also in anonymous mode (Firefox)

The freezing happens irrespective of number of videos. I tested it with only two videos to be preloaded and they still freeze for approx. 10 seconds and then slowly start to play in a jerky/buffering way as if no preloading has happened before.