７．動画を提示 - jsPsych-Introduction

７．動画を提示

https://gyazo.com/58be89bb279a0d6b124e4c56787960a8

動画を表示するコードです。

これは，ダウンロードしたjspsychのフォルダにある例題です（jspsych-6.3.1\examplesにあります）。

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

この動画を提示するためのhtmlファイルがある場所を中心に考え，どこに読み込むべきファイルがあるかを指定する必要があります。<script src=".." の ".."は，このhtmlファイルのあるフォルダの1つ上の階層（フォルダ）を指定しているという意味になります。

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

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

次に，動画を提示するためのプラグイン，jspsych-video-button-responseを読み込みます。

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

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

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

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

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

まず，動画提示ですのでpreloadの定義です。

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

typeは，'html-button-response'とします。

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

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

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

typeは，video-button-responseを使用します。

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

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

margin_verticalは，ボタンの縦の余白サイズ，margin_horizontalは，ボタンの横の余白サイズを指定します。

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

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

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

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

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

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

type，stimulusはtrial_1と同じです。

choicesは，'😄','😁','🥱','😣','🤯'です。

button_htmlは，ボタンを作成します。%choice%は，choisesで定義した顔の絵をそれぞれ指定しています。

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

最後に，jsPsych.initの中ので，timelineに定義した変数を提示順に読み込んでいます。

code: jspsych-video-button-response.html

<!DOCTYPE html>

<html>

<head>

</head>

// preloading videos only works when the file is running on a server

// if you run this experiment by opening the file directly in the browser,

// then video preloading will be disabled to prevent CORS errors

var preload = {

type: 'preload',

auto_preload: true

}

var pre_trial = {

type: 'html-button-response',

stimulus: '<div style="max-width:600px;"><p>Some browsers now require that a user interacts with a web page before video or audio content will autoplay. Clicking the button below satisfies that requirement.</p><p>Without this trial, the video will load but not play.</p></div>',

choices: 'Continue'

}

var trial_1 = {

type: 'video-button-response',

stimulus: 'video/sample_video.mp4',

choices: 'Y','N',

margin_vertical: '10px',

margin_horizontal: '8px',

prompt: 'Press Y or N',

width: 600,

//height: 600,

autoplay: true,

//controls: true,

//start: 8,

//stop: 9,

rate: 1.5,

//trial_duration: 2000,

response_ends_trial: true

}

var trial_2 = {

type: 'video-button-response',

stimulus: 'video/sample_video.mp4',

choices: '😄','😁','🥱','😣','🤯',

button_html: '<div style="font-size:40px;">%choice%</div>',

margin_vertical: '10px',

margin_horizontal: '8px',

prompt: '<p>Click the emoji that best represents your reaction to the video</p><p>When the video stops, click a button to end the trial.</p><p>Response buttons are disabled while the video is playing.</p>',

width: 600,

autoplay: true,

response_ends_trial: true,

response_allowed_while_playing: false

}

jsPsych.init({

timeline: preload, pre_trial, trial_1, trial_2,

on_finish: function() { jsPsych.data.displayData(); }

});

</script>

</html>

それでは，\jspsych-6.3.1\examples\jspsych-video-button-response.htmlをダブルクリックして実際に動かしてみましょう。