fix bug with start parameter in video-* plugins - fixes #1806 (#2192)

* fix start param bug in video-* plugins - #1806
* add changeset for video start param fix

Author: becky-gilbert

.changeset/violet-steaks-hug.md

@@ -0,0 +1,7 @@
+---
+"@jspsych/plugin-video-button-response": patch
+"@jspsych/plugin-video-keyboard-response": patch
+"@jspsych/plugin-video-slider-response": patch
+---
+
+Fix implementation of `start` parameter in `video-*` plugins so that it works in iOS/MacOS browsers.

packages/plugin-video-button-response/src/index.ts

@@ -236,13 +236,24 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
     // before showing and playing, so that the video doesn't automatically show the first frame
     if (trial.start !== null) {
       video_element.pause();
-      video_element.currentTime = trial.start;
       video_element.onseeked = function () {
         video_element.style.visibility = "visible";
+        video_element.muted = false;
         if (trial.autoplay) {
           video_element.play();
+        } else {
+          video_element.pause();
         }
+        video_element.onseeked = function () {};
+      };
+      video_element.onplaying = function () {
+        video_element.currentTime = trial.start;
+        video_element.onplaying = function () {};
       };
+      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
+      // change current time, then show/unmute
+      video_element.muted = true;
+      video_element.play();
     }
 
     let stopped = false;

packages/plugin-video-keyboard-response/src/index.ts

@@ -189,13 +189,24 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     // before showing and playing, so that the video doesn't automatically show the first frame
     if (trial.start !== null) {
       video_element.pause();
-      video_element.currentTime = trial.start;
       video_element.onseeked = function () {
         video_element.style.visibility = "visible";
+        video_element.muted = false;
         if (trial.autoplay) {
           video_element.play();
+        } else {
+          video_element.pause();
         }
+        video_element.onseeked = function () {};
+      };
+      video_element.onplaying = function () {
+        video_element.currentTime = trial.start;
+        video_element.onplaying = function () {};
       };
+      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
+      // change current time, then show/unmute
+      video_element.muted = true;
+      video_element.play();
     }
 
     let stopped = false;

packages/plugin-video-slider-response/src/index.ts

@@ -284,13 +284,24 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
     // before showing and playing, so that the video doesn't automatically show the first frame
     if (trial.start !== null) {
       video_element.pause();
-      video_element.currentTime = trial.start;
       video_element.onseeked = function () {
         video_element.style.visibility = "visible";
+        video_element.muted = false;
         if (trial.autoplay) {
           video_element.play();
+        } else {
+          video_element.pause();
         }
+        video_element.onseeked = function () {};
+      };
+      video_element.onplaying = function () {
+        video_element.currentTime = trial.start;
+        video_element.onplaying = function () {};
       };
+      // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
+      // change current time, then show/unmute
+      video_element.muted = true;
+      video_element.play();
     }
 
     let stopped = false;