動画を提示 jsPsych 8.3.0

動画を提示してボタンで回答。スクリプトを順に読み、実行例で動きを確かめましょう。

jsPsych 8.3.0 · video

動画を提示

再生終了後にボタンで回答

video-button-response を使います。動画のパスは配列として stimulus: ['...mp4'] に指定します。音声と同様、再生前に利用者がボタンを押す画面を置きます。

サンプルでは再生が終わるまで回答ボタンを無効にします。動画ファイルは大きいため、公開サイトではアップロード後に読み込みも確認してください。

ブラウザで試す ↗ HTMLを保存

このスクリプトの読み方

初期化
const jsPsych = initJsPsych({ on_finish: ... })

実験の全体設定をまとめて決める場所です。ここでは、実験終了時に jsPsych.data.displayData('csv') を呼び、結果をCSV形式で画面に出し、localSave('csv', 'video-data.csv') でファイルとして保存するように設定しています。
読み込み
plugin-preload.js / plugin-html-button-response.js / plugin-video-button-response.js

動画の読み込み、開始ボタンの提示、動画と回答ボタンの提示に必要なプラグインです。
動画の準備
const preload = {type: jsPsychPreload, video: [...] }

サンプル動画を事前に読み込みます。動画の事前読み込みは配信方法やブラウザの制約を受けるため、公開後にも動作確認します。
開始操作
const start = {type: jsPsychHtmlButtonResponse, ...}

「開始」ボタンを押してから動画へ進みます。ブラウザの自動再生制限への対応です。
提示内容
stimulus: ['media/sample_video.mp4'] / autoplay: true

動画のパスは配列で渡します。width: 600 は表示幅を600pxに設定します。
回答
choices: ['見た'] / response_allowed_while_playing: false

再生が終わるまで回答ボタンを使えず、終了後に「見た」を押すと試行が終わります。
実行順
const timeline = []; timeline.push(preload); timeline.push(start); timeline.push(videoTrial); jsPsych.run(timeline);

各試行を変数として定義したあと、timeline.push() で順番に追加し、最後に jsPsych.run(timeline) で実行します。事前読み込み→開始ボタン→動画提示の順です。終了後は反応データをCSV形式で表示し、CSVファイルをダウンロードします。

サンプルコードを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>動画提示 | 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'],
        // autopreload: true
    };
    timeline.push(preload);

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

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

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

教材の目次に戻る ↑