２０．動画を提示（jspsych@7.3.0）

https://gyazo.com/58be89bb279a0d6b124e4c56787960a8

動画を表示するコードについて解説します。

jspsych-video-button-response.html

これは，ダウンロードしたjspsychのexamplesフォルダにある例題です。

ダウンロードして利用する際は，jsファイルやmp4ファイルのパスに注意してください。

ヘッダーを見ていきます。

まず，jsPsychのライブラリーを読み込みます。

<script src="../dist/jspsych.js"></script>

これまでのhtmlファイルと比べてもらうと分かりますが，このファイルのパスの始めが”../”から始まっています。

<script src=".." の ".."は，このhtmlファイルのあるフォルダの1つ上の階層（フォルダ）を指定しているという意味になります。

相対的パスと言って，このファイルがある場所を中心に考え，どこに読み込むべきファイルがあるかを指定する時に使います。

同様の方法でプラグインを読み込んでいきます。

動画を提示するためのプラグイン，plugin-video-keyboard-response.jsを読み込みます。

次に，テキストを呈示するためのプラグイン，plugin-html-button-response.jsを読み込んでいます（注）。

次に，preloadを読み込んでいます。

最後に，jsPsychのスタイルシートを読み込みます。

（注）音声と同様に，最近のwebブラウザでは，初めから動画を提示することができません。そこで今回は，動画を提示する前に文字を提示します。

次に<script>~</script>です。

initJsPsychで，jsPsychという名前の変数を定義しています。

次に，動画提示ですので読込の遅延が計測に影響ないようにpreloadの定義です。

次に，文字を表示するため，varを使ってpre_trialという名前の変数を定義します。

typeは，jsPsychHtmlButtonResponseとします。

stimulusは，max-widthを用いて領域の幅の最大値を600ピクセルに指定します。さらに，<p>を用いて，文章を２つのパラグラフに分けています。

choicesは，選択ボタンの名前を定義します。

次に，動画を読み込むため，varを使ってtrial_1という名前の変数を定義します。

typeは，jsPsychVideoKeyboardResponseを使用します。

stimulusは，動画ファイルを指定します，動画ファイルのパスに気をつけてください。

choicesは，キーボードの'y' または 'n' を選択させます。

margin_verticalは，ボタンの垂直（縦）方向の大きさを指定します。

margin_horizontalは，ボタンの水平（横）方向の大きさを指定します。

promptは，動画に下に表示する文字を指定します。

widthは，動画の幅のサイズを指定します。

autoplayは，trueの場合，動画がロードされてすぐに再生されます。

rateは，再生される早さを指定する事が出来ます。普通の速さは1，1以下の場合は再生速度は遅く，1以上の場合は再生速度を速く設定できます。

response_ends_trialは，trueの場合，参加者がボタンを押すとすぐに動画を終了する設定となります。

falseの場合は，trial_durationで定義した時間までtrialを止める事が出来ません。

次に，varを使ってtrial_2という名前の変数を定義します。

typeとstimulusはtrial_1と同じです。

button_htmlは，<div>%choice%</div>で顔文字をボタンに指定しています。

response_ends_trialがtrueの場合は，trial_durationで定義した時間より前でもキーを押すことによりtrialを止める事が出来ます。

response_allowed_while_playing: falseは，動画が流れている間のボタン押しを禁止しています。

response_ends_trial: trueと response_allowed_while_playing: falseは，response_allowed_while_playing: falseが優先されます。

最後に，jsPsych.runで，preload, pre_trial, trial_1, trial_2の提示順に読み込んでいます。

次はGo-NoGo課題について説明していきます。

https://gyazo.com/ad42b4e5fba2e91518e9cc11e5c8afe2

【目次】