26．動画を提示（jspsych@8.0.2）
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と同じです。
choicesは，'😄','😁','🥱','😣','🤯'のように顔文字も設定できます。
button_htmlは，以下で顔文字そのものをボタンに指定できます。
code:button.html
button_html: function (choice) {
return '<span style="font-size:40px;">' + choice + '</span>';
},
response_ends_trialがtrueの場合は，trial_durationで定義した時間より前でもキーを押すことによりtrialを止める事が出来ます。
falseの場合は，参加者が時間が完了する前に応答してもtrial_durationに達するまでtrialは継続します。
response_allowed_while_playingがtrueの場合は，動画が再生されている間でも応答が許可されます。
falseの場合は，動画が流れ終えてからボタン押しが有効になります。
response_ends_trial: trueと response_allowed_while_playing: falseは，response_ends_trial: trueが優先されます(ver8から)。
次に，varを使ってtrial_3という名前の変数を定義します。
デフォルトでは以下のように定義されていましたが，
code:button2.html
button_html: '<div style="font-size:40px;">%choice%</div>',
エラーが出てしまいましたので，以下の様に変更してください。
code:button3_html
button_html: (choice) => {
return <button class="jspsych-btn" style="font-size: 40px;">${choice}</button>
},
enable_button_afterは，ボタンが有効になるまでの遅延時間です（ミリ秒単位）。response_allowed_while_playing が true の場合、タイマーはすぐに開始されます。false の場合、タイマーは音声の再生が終了した時点で開始されます。
デフォルトでは， response_allowed_while_playing: true, enable_button_after: 2000となっているため，動画が再生されてから2秒後にボタン押しが許可されます。
response_allowed_while_playing: false, enable_button_after: 2000とすると動画が再生し終えたらボタン押しが許可されます。
最後に，jsPsych.runで，preload, pre_trial, trial_1, trial_2, trial_3の提示順に読み込んでいます。
次はGo-NoGo課題について説明していきます。
https://gyazo.com/ad42b4e5fba2e91518e9cc11e5c8afe2
【目次】