動画を提示 jsPsych 8.3.0
動画を事前に読み込んで再生し、再生終了後にボタンで回答する方法を学びます。サンプルのコードを上から順に読み、実際に動かして確かめましょう。
動画を提示
開始ボタンを押して再生し、動画が終わってから回答
この例では、動画を事前に読み込んでから開始画面を表示し、参加者が開始ボタンを押すと動画を再生します。動画の再生中は回答できず、再生終了後に回答ボタンが使えるようになります。
ブラウザは、音声付き動画などの自動再生を制限することがあります。開始ボタンは再生前に参加者の操作を挟むためのものですが、ブラウザや端末によって動作は異なるため、実際に利用する環境で確認してください。
サンプルを順番に読んでみよう
-
jsPsychとプラグインを読み込む
HTMLの
<head>では、dist/jspsych.jsからjsPsych本体を読み込みます。さらに、動画の事前読み込み、開始ボタン、動画と回答ボタンの表示に使う3つのプラグインと、標準の表示を整えるdist/jspsych.cssを読み込みます。これらのパスはサンプルHTMLから見た相対パスです。サンプルは
distとmediaの隣に置き、別のフォルダへ移動しないようにしてください。 -
実験を初期化し、終了時の処理を決める
const jsPsych = initJsPsych({ on_finish: ... })initJsPsych()は実験を動かすjsPsychを準備します。設定のon_finishは、タイムラインの全試行が終わったあとに実行される処理です。jsPsych.data.displayData('csv')は記録データをCSV形式で画面に表示し、jsPsych.data.get().localSave('csv', 'video-data.csv')はブラウザにCSVファイルのダウンロードを指示します。これは参加者の端末への保存であり、サーバーへデータを送信する処理ではありません。 -
タイムラインを用意する
const timeline = [];で、これから実行する試行を並べる空の配列を作ります。各試行を定義したあと、timeline.push(...)でこの配列に追加します。追加した順が実行順になります。 -
動画を事前に読み込む
preload試行ではjsPsychPreloadプラグインを使い、video配列に動画ファイルを指定します。video: ['media/sample_video.mp4']動画を提示する前に読み込んでおくと、再生開始時にファイルを待つ時間を減らせます。ファイル名の大文字・小文字も含め、実際のファイル名とパスを一致させてください。
-
開始ボタンを表示する
start試行ではjsPsychHtmlButtonResponseプラグインを使います。stimulusはボタンの前に表示する案内文、choicesはボタンのラベルです。参加者がボタンを押すと開始試行が終わり、次の動画試行へ進みます。ブラウザが音声付きメディアを再生する前にユーザー操作を求める場合に備えるための画面です。
-
動画試行の内容を設定する
jsPsychVideoButtonResponseプラグインが動画と回答ボタンを表示します。stimulus: ['media/sample_video.mp4']で動画ファイルを指定し、width: 600で表示幅を600ピクセルにします。autoplay: trueは試行が始まったときに再生を開始する設定です。promptには動画の下に表示する案内を、choicesには回答ボタンのラベルを指定します。共通サンプルでは日本語と英語を併記しています。 -
再生終了後に回答できるようにする
response_allowed_while_playing: falseは、動画の再生中に回答を受け付けない設定です。再生が終わると回答ボタンが使えるようになり、参加者が押すと試行が終了します。このボタンで分かるのは、参加者が動画のあとに回答したことです。動画を注意深く見たかどうかまで、この設定だけで確認できるわけではありません。研究で知りたいことに合わせて回答方法を設計します。
-
試行を並べて実行する
timeline.push(preload)、timeline.push(start)、timeline.push(videoTrial)の順に、事前読み込み、開始画面、動画試行をタイムラインに追加します。最後のjsPsych.run(timeline)が実験を開始します。すべての試行が終わると、初期化時に設定した終了処理が動き、データが画面に表示されてCSVファイルがダウンロードされます。
試してみよう
- サンプルを実行し、動画の前に開始画面が表示されることを確認します。
mediaフォルダに自分の動画を置き、事前読み込みと動画試行の両方のパスを変更します。両方が同じ正しいファイルを指しているか確認しましょう。widthの数値を変え、動画の表示サイズがどう変化するか確認します。画面幅の狭い端末でも試します。- ボタンのラベルや
promptの案内文を変更し、再生中は回答できず再生後に回答できることを確かめます。 - 最後に、画面に表示されたCSVデータと、ダウンロードされた
video-data.csvの両方を確認します。
自分の動画を使うときの確認
動画ファイルは大きくなることがあります。ファイルが正しく配置・アップロードされているか、パスに誤りがないかを確認してください。また、実際に利用するブラウザが動画形式に対応しているか、再生・回答・データ保存まで一通り試します。ローカルで試すときは、ブラウザが file:// からのメディア読み込みを制限する場合があるため、Live ServerなどのローカルWebサーバー経由で開いてください。
共通サンプルのコードを見る
<!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'],
// autopreload: true
};
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>