Testing if trial ends before video should

[jackransomlovell]

Hi, I have written an experiment that pauses a vid at a random point, asks for some rating, then resumes. I had to submit the trial durations by hand (couldn't figure out a way to just get the duration from a <video> object), so our concern is that if the video takes some time to load, this will cause the resume to start at the wrong point (i.e. the first video ends at the wrong time). Is there any way to control this? My code is below :)

         {
            type: 'html-keyboard-response',
            stimulus: function(){
                var vid = video[0] // array of video urls
                var vid_tag = '<video id="stim" autoplay width="640" height="480">'+                                                          
                                '<source src='+vid+' type="video/mp4">'+ 
                                '<source src='+vid+' type="video/mov">'+        
                              '</video>'
                vid_stim.push(vid);
                trial_stim.push(vid_tag);
                return(vid_tag)
            },
            choices: jsPsych.NO_KEYS,
            trial_duration: function(){
                var durationOg = 51000 // duration of vid
                var max = durationOg - 10000
                var min = 10000
                var durationNew = Math.random() * (max-min) + min 
                vid_length.push(51000)
                durations.push(durationNew)
                return(durationNew)
            }
        },
        {
      type:'multiple-slider',
      preamble: "<strong>Please rate how much this video is currently making you feel each of the following:</strong>",
      questions: //array of questions,
        require_movement: true,
        data:{
            video: function(){
                var string = vid_stim[vid_stim.length-1]
                var split = string.split('/')
                var vidFin = split[split.length-1]
                return vidFin
            },
            phase: 'response',
            stopTime: durations[durations.length-1]
        }
        },
        {
            type: 'html-keyboard-response',
            stimulus: function(){
                var vid2 = vid_stim[vid_stim.length-1];//get the video
                var dur2 = String(durations[durations.length-1]/1000);//get the duration in seconds
                var t = '#t=';
                var duration2 = t.concat(dur2)
                var start2 = vid2.concat(duration2)//resume
                var vid_tag = '<video id="stim" autoplay width="640" height="480">'+                                                          
                                '<source src='+start2+' type="video/mp4">'+ 
                                '<source src='+start2+' type="video/mov">'+        
                              '</video>'
                return(vid_tag)
            },
            choices: jsPsych.NO_KEYS,
            trial_duration: function(){
                var duration = vid_length[vid_length.length-1] - durations[durations.length-1] // get the duration
                return(duration)
            }
        }

[becky-gilbert]

Hi @jackransomlovell, yes, I see what you mean. What I would do is switch to using one of the video-* plugins, and use the stop and start parameters to control when the video stops and resumes (rather than stopping the video using the trial duration). These parameters use video's own clock, so you don't have to worry about when the video starts relative to when the trial starts.

The catch with this solution is to get the trial to end automatically when the video is stopped. There's a parameter called trial_ends_after_video, but I think that only works when the video actually reaches the end time, because it relies on the ended event firing, whereas using the stop parameter pauses the video. One solution might be to edit the plugin so that the trial ends after the video is paused:

   if(trial.stop !== null){
     video_element.addEventListener('timeupdate', function(e){
       var currenttime = video_element.currentTime;
       if(currenttime >= trial.stop){
         video_element.pause();
         end_trial();  // <---- add this to end trial after the video reaches the stop time
       }
     })
   }

By the way, I think you can get the video's duration using its duration property, but this will only work once the video has finished loading.

[jackransomlovell]

Yay, this is super helpful thank you so much @becky-gilbert ! I will try to implement it this weekend. For the duration property, I posted a while back about the struggle with being unable to load the video before the duration would need to be called, so I just went with the manual way.