Customizing HTML Code

Here are the main editable sections of the video for event segmentation HTML file. Under each code section, I detail which values you can change, and what they do. Note: to change the contents of this file, you will need to open it in an editor or some sort (not opening the HTML page in your browser). For Windows users, notepad will work. I personally recommend Notepad++ for enhanced organization features.

Video

<video style="display:block; margin: 0 auto;" id="myVideo" width="1024" height="768" autoplay muted>
  <source src="Legos.mp4" type="video/mp4" controls>
  Your browser does not support HTML5 video.
</video>

This code makes the page display your video. In this case, it it displaying a video called Legos.mp4. You can set the video size, video type, and autoplay settings here.

Current time marker for segmentation

<div>
	<p id="currTime">Current time: 0 seconds</p>
</div>

This is the visual feedback on the screen that tells you the current video time when you (or a participant) presses a button to segment a video. You can remove this if you would like.

Keys to segment, and force end of routine

function logKey(e) {
  if (e.keyCode == 32) {
    getCurTime();
	storeData();
  }
  else if (e.keyCode == 78) {
	parent.finishHTML();
  }
}

This function updates the current segmented time on the screen, and saves that time to your data, when the user presses a button to segment between events. This is currently set to the space bar, but can be changed to any key by swapping out the JavaScript event keycode for your desired key, (see https://keycode.info/ ).

In this code, if the participant presses a different button, in this case the N key, they can exit the iFrame. If you have continueRoutine =! window.finishedHTML; in the “each frame” section of your PsychoPy code component, this will also end the PsychoPy routine. I like to keep this in for debugging purposes, but you can give this option to your participants, or delete it entirely.

Store data

// Stores some data and finishes HTML
storeData = function () {
   parent.addData("practiceSegTime", vid.currentTime);
   parent.nextEntry();
 }

This code saves the segmentation time to your PsychoPy results data file. You can change the name of this data column by replacing “practiceSegTime” with anything you wish.

End iFrame (and routine) after video end

vid.onended = function() {
  parent.finishHTML();
};

This code will call the parent.finishHTML() function, ending the iFrame (and potentially the routine, if you have that set), after the end of the video presented. You can remove this if you have more you would like to do in the iFrame after the video has ended.

Browser check and Window size check
//save screen size and browser information
	parent.addData("screensizeX",window.screen.width);
	parent.addData("screensizeY",window.screen.height);
	parent.addData("Browser",browserName);
	parent.addData("Version",fullVersion);

These addData() commands send back the user’s screen size (in width and height) and the infomation gathered from the browser check in the code preceeding this (sending back the browser name and version number).