Error loading video #784

jackransomlovell · 2020-06-24T20:34:10Z

jackransomlovell
Jun 24, 2020

Hi all,

I'm having a problem loading video into a jsPsych task. It currently randomly selects URLs to a public S3 bucket from an initial array and returns it as a HTML5 video tag. The current problems I am running into are:
i) If I include a preload_video statement in the jsPsych.init object, the experiment crashes before the progress bar even starts and I get the error:
Access to XMLHttpRequest at 'https://spacetopvids.s3.us-east-2.amazonaws.com/scan_1_HB_CUT.mp4-00.00.00.000-00.00.57.000.mp4' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
ii) If I do not include the preload statement, the experiment runs but the video does not load at all. It is just stuck on the first frame.

Has anyone ran into this before? Thanks. Code attached below

<html>
    <head>
        <title>Spatial Topology</title>
        <script src="./jspsych-6.1.0/jspsych.js"></script>
        <script src="./jspsych-6.1.0/plugins/jspsych-html-keyboard-response.js"></script>
        <script src="./jspsych-6.1.0/plugins/jspsych-html-slider-response.js"></script>
        <link href="./jspsych-6.1.0/css/jspsych.css" rel="stylesheet" type="text/css"></link>
    </head>
<body></body>
<script>
    var timeline=[];
    var videos = [
    ['https://spacetopvids.s3.us-east-2.amazonaws.com/scan_1_Best_Friends_Wedding_CUT.mp4',
     'https://spacetopvids.s3.us-east-2.amazonaws.com/scan_1_HB_CUT.mp4-00.00.00.000-00.00.57.000.mp4']:
    var SpaceTop = {
        timeline:[
            {
                type: 'html-keyboard-response',
                stimulus: '<div style="font-size:60px">+</div>',
                choices: jsPsych.NO_KEYS,
                trial_duration:1000,
            },
            {
                type: 'html-keyboard-response',
                stimulus: function(){
                    var stim = [];
                    stim = jsPsych.randomization.sampleWithoutReplacement(videos, 1)[0]
                    return(
                                '<video autoplay>'+                                                          
                                    '<source src='+stim+' type="video/mp4">'+ 
                                    '<source src='+stim+' type="video/mov">'+        
                                '</video>'
                    )
                },
                choices: jsPsych.NO_KEYS
            },
            {
                type: 'html-slider-response',
                stimulus: '<div style="font-size:60px">In relation to the previous clip, how do you feel?</div>',
                labels: ['Barely at all', 'Strongest Imaginable'],
                prompt: '<div style="font-size:60px"><strong>Personal relevance</strong></div>',
                response_ends_trial: true,
                min: 0,
                max: 100,
                start: 50,
                step: 1
            }
        ]
    }

    var SpaceTop_sequence = {
        timeline: [SpaceTop]
    }

    timeline.push(SpaceTop_sequence)

    jsPsych.init({
        timeline: timeline
    })

</script>
</html>

vijaymarupudi · 2020-06-24T20:42:13Z

vijaymarupudi
Jun 24, 2020

Yep, this is a typical CORS error. Typically the server you're trying to retrieve the images from should allow cross-domain requests. Can you host the videos on the same server you're hosting the experiment on?

Otherwise, consider setting up CORS on your S3 bucket: https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

2 replies

jackransomlovell Jun 28, 2020
Author

Thanks for the response! I can host the vids on the same server I'm hosting the experiment. Going to try to set up CORS on my S3 bucket. Will post any questions here, thanks!

vijaymarupudi Jun 28, 2020

You're welcome!

jackransomlovell · 2020-07-01T16:37:21Z

jackransomlovell
Jul 1, 2020
Author

Ok, have a new problem :(. I configured CORS on my S3 bucket, and this allows the experiment to work without preloading the stimuli, but when I try to preload I get the following error:
Uncaught TypeError: Cannot read property 'style' of null at update_loading_progress_bar (jspsych.js:2559) at XMLHttpRequest.request.onload (jspsych.js:2464)
Any thoughts? It begins for a moment then throws this error a third of the way through.

1 reply

vijaymarupudi Jul 1, 2020

Firefox: https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor
Chrome: https://developers.google.com/web/tools/chrome-devtools/network

Can you check if any requests failed, and check what the response content was?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Error loading video #784

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Error loading video #784

Uh oh!

Uh oh!

jackransomlovell Jun 24, 2020

Replies: 2 comments · 3 replies

Uh oh!

vijaymarupudi Jun 24, 2020

Uh oh!

jackransomlovell Jun 28, 2020 Author

Uh oh!

vijaymarupudi Jun 28, 2020

Uh oh!

jackransomlovell Jul 1, 2020 Author

Uh oh!

Uh oh!

vijaymarupudi Jul 1, 2020

jackransomlovell
Jun 24, 2020

Replies: 2 comments 3 replies

vijaymarupudi
Jun 24, 2020

jackransomlovell Jun 28, 2020
Author

jackransomlovell
Jul 1, 2020
Author