Present a video jsPsych 8.3.0

Learn how to preload and play a video, then collect a response after playback.

jsPsych 8.3.0 · video

Play a video and collect a response

The participant starts playback and responds after the video ends.

The sample uses jsPsychVideoButtonResponse. It first shows a start button, then plays a video, and finally lets the participant click a response button. A separate preload trial loads the video before it is needed.

Browsers may restrict media playback until a person interacts with the page. The start button gives the participant that interaction before the video trial begins. This does not replace testing: autoplay and supported video formats can vary between browsers and devices.

Run the example ↗ Download the HTML file

Read the sample step by step

Load jsPsych and the required plugins
In the sample's <head>, dist/jspsych.js provides the jsPsych library. The preload, HTML button-response, and video button-response plugin files provide the three trial types used in this experiment. dist/jspsych.css supplies the default jsPsych display styles.

These paths are relative to the sample HTML file. The sample belongs in the jspsych folder next to dist and media; do not move it into this lesson's en folder.
Initialize the experiment and define what happens at the end
const jsPsych = initJsPsych({...}) creates the jsPsych controller used to run the experiment. Its on_finish callback runs after the full timeline is complete.

In this sample, displayData('csv') displays the recorded data in CSV format on the page, while localSave('csv', 'video-data.csv') asks the browser to download a CSV file. This saves the data on the participant's device; it does not send the data to a server.
Create a timeline
const timeline = []; makes an empty list of experiment steps. Each trial is defined below and added to this list with timeline.push(...). The order of the pushes is the order in which the trials run.
Preload the video
The preload trial uses jsPsychPreload and lists the video in its video array:

video: ['media/sample_video.mp4']

Preloading fetches the media before the video trial, which can reduce interruptions caused by waiting for the file. The path is relative to the HTML file. Keep the filename and capitalization exactly as they are on disk.
Show the start button
The start trial uses jsPsychHtmlButtonResponse. Its stimulus is the instruction shown above the button, and choices supplies the button label. When the participant clicks it, the start trial ends and jsPsych moves to the video trial.

This deliberate click is useful because browsers often require a user gesture before playing media with sound.
Configure the video trial
jsPsychVideoButtonResponse displays the media file and a response button. In the sample, stimulus: ['media/sample_video.mp4'] points to the video, width: 600 sets its display width to 600 pixels, and autoplay: true starts playback automatically when the trial appears.

prompt displays an instruction below the video. choices: ['見た / Watched'] sets the response button's label. The shared sample uses Japanese and English text so it can be used with either lesson.
Wait until playback ends before accepting a response
response_allowed_while_playing: false prevents a response while the video is playing. Once playback has ended, the participant can click the response button to finish the trial. The trial then records the response and response time.

The button records that the participant continued after viewing; it does not by itself prove that the video was watched attentively. Design response options and checks to match the question your study is intended to answer.
Add the trials and run them
The sample adds preload, start, and videoTrial to timeline, in that order. Finally, jsPsych.run(timeline) starts the experiment. When all trials finish, the on_finish callback displays and downloads the data.

Try it yourself

Run the shared sample and check that the start screen appears before the video.
Change the video path in both the preload and video trial to a video file you have placed in media. Both paths must point to the correct file.
Change width and observe how the video size changes. Check the result on a narrow screen as well.
Change the response button label or prompt, then run the sample again and confirm that the participant can respond only after playback.
At the end, check the CSV displayed in the browser and the downloaded video-data.csv file.

Check before using your own video

Video files can be large, so verify that the file has uploaded completely and that its path is correct. Confirm that the target browsers support the file's encoding and that playback, the response button, and data saving all work as intended. When testing locally, open the sample through a local web server such as Live Server; some browsers restrict media loading from a file:// address.

View the shared sample code

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>動画提示 / Video presentation | jsPsych 8.3.0</title>
    <script src="dist/jspsych.js"></script>
    <script src="dist/plugin-preload.js"></script>
    <script src="dist/plugin-html-button-response.js"></script>
    <script src="dist/plugin-video-button-response.js"></script>
    <link rel="stylesheet" href="dist/jspsych.css">
</head>
<body></body>
<script>
    const jsPsych = initJsPsych({
        on_finish: () => {
            jsPsych.data.displayData('csv');
            jsPsych.data.get().localSave('csv', 'video-data.csv');
        }
    });

    const timeline = [];

    const preload = {
        type: jsPsychPreload,
        video: ['media/sample_video.mp4']
    };
    timeline.push(preload);

    const start = {
        type: jsPsychHtmlButtonResponse,
        stimulus: '<p>ボタンを押すと動画を再生します。<br>Click the button to play the video.</p>',
        choices: ['開始 / Start']
    };
    timeline.push(start);

    const videoTrial = {
        type: jsPsychVideoButtonResponse,
        stimulus: ['media/sample_video.mp4'],
        choices: ['見た / Watched'],
        width: 600,
        autoplay: true,
        response_allowed_while_playing: false,
        prompt: '<p>再生が終わってからボタンを押してください。<br>Click the button after playback ends.</p>'
    };
    timeline.push(videoTrial);

    jsPsych.run(timeline);
</script>
</html>

Back to the lesson contents ↑