Videos won't play on iphone safari in cognition.run

Hello, Firstly I want to thank you guys for great efforts on jspsych which helps a lot on psychology experiments. However, I've encounted a blank screen when trying to play videos on iphone safari recently, while the experiment script runs quite well on Androids and windows10 laptops.

I inspected what happend when safari loaded the script. As is shown in the picture below, the preload-plugin works fine, and the first video-keyboard-response-stimulus works fine too, the first video can be autoplayed. However, I get blank screen during the second video trial which is last line in the picture.

There is a 'not allowed error' and I don't know what to do with it due to limited knowledge on broswers. I wish someone could kindly help me resolve this problem.

As I know, the former issues about images especially #1548 which @becky-gilbert said on 9 sep may have something to do with the problem, but nothing changed even if I replace the video paths to cognition CND URLs.

Besides, I ran the jspsych 7 script below on cognition.run(https://fhxfljhvg0.cognition.run/), and I've upload all the videos on it. The 'pubg.mp4' is about 12.7MB and 'fish.mp4' is 1.25MB.

The device I use is iphone 13 pro max, iOS 15.0.2.

   var jsPsych = initJsPsych({
        on_finish: function() { 
        jsPsych.data.displayData();
      }
    });

    var timeline = [];

    var video = [
      'pubg.mp4','pubg_30.mp4','pubg_60.mp4','fish.mp4','fish_30.mp4','fish_60.mp4'
      ];

    // preload videos//
    var preload = {
        type: jsPsychPreload,
        show_detailed_errors: true,
        show_progress_bar: true,
        video: video
    }
    timeline.push(preload);

    var instruction ={
       type: jsPsychHtmlButtonResponse,
       stimulus: `
          <p><strong>Welcom</strong></p>
          <p>Press 'OK'</p>
        `,
      choices:['OK']
    };
    timeline.push(instruction);

    /* define trial stimuli array for timeline variables */
    var trial_stimuli = [
      { stimulus1: ['pubg.mp4'], stimulus2: ['fish.mp4']} ,
      { stimulus1: ['pubg_30.mp4'], stimulus2:['fish_30.mp4']},
      { stimulus1: ['pubg_60.mp4'], stimulus2:['fish_60.mp4']}/**/
    ];

    var fixation1 = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<div style="font-size:60px;">+</div>',
      choices: "NO_KEYS",
      trial_duration: function(){
        return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
      },
      data: {
        task: 'fixation'
      }
    };

    var first_video = {
      type: jsPsychVideoKeyboardResponse,
      stimulus: jsPsych.timelineVariable('stimulus1'),
      choices: "NO_KEYS",
      autoplay: true,
      controls: true,
      //playsinline: true,
      start:0,
      stop:10,
      //muted:true,
      width:812,
      height:375,
      trial_ends_after_video: true,
      data: {
        video_name: jsPsych.timelineVariable('stimulus1'),
        trial_name: 'first'
      },
      on_start:function(first_video){
        //first_video.video_element.muted = true;
        //first_video.video_element.play()
      }
    };

    var fixation2 = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<div style="font-size:60px;">+</div>',
      choices: "NO_KEYS",
      trial_duration: function(){
        return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
      },
      data: {
        task: 'fixation'
      }
    };

    var second_video = {
      type: jsPsychVideoKeyboardResponse,
      stimulus: jsPsych.timelineVariable('stimulus2'),
      choices: "NO_KEYS",
      autoplay: true,
      controls: true,
      //playsinline: true,
      start:0,
      stop:10,
      //muted:true,
      width:812,
      height:375,
      trial_ends_after_video: true,
      data: {
        video_name: jsPsych.timelineVariable('stimulus2'),
        trial_name: 'second'
      }
    };

    var choice = {
      type: jsPsychHtmlButtonResponse,
      stimulus: '<p style="font-size:20px">Please judge which one looks fluent to you</p>',
      choices: ['The former video', 'The latter video']
    };

    var trial_procedure = {
      timeline: [fixation1, first_video, fixation2,second_video,choice],
      timeline_variables: trial_stimuli,
      repetitions: 0,
      randomize_order: true
    };
    timeline.push(trial_procedure);

    jsPsych.run(timeline);

jspsych / jsPsych

Videos won't play on iphone safari in cognition.run #2328