オーディオ・動画の操作:

再生位置が逆方向に操作されたら関数を実行

指定した動画の再生時間を監視して、ユーザーによって再生位置が逆方向に操作されたら任意の関数を実行する。

Video
Video Nodeを指定 id値を文字列で指定してもよい
Function
実行する関数名を渡す ()を省いた形で指定。文字列ではない点に注意
Bool
登録済みの設定を削除する ここで true を渡すと、前の2つの引数が一致する登録済み設定を削除できる
●必須引数 ●オプション引数(省略可能)

記述例

$videoCheckReverse($id('aVideo'), showCaption1)
$videoCheckReverse('aVideo', showCaption2)
$videoCheckReverse('aVideo', showCaption2, true)

注意点

逆方向への操作中は繰り返し関数を実行しようとする仕様なので、短時間で繰り返し実行すると不都合な関数の場合には、動作サンプルのように関数の実行後は一定時間は反応しないようなプログラム設計にすること。

動作サンプル

動画の再生状況を監視して、逆方向に操作されたら2秒間だけメッセージを表示する。

PENTACON auto 50mm F1.8

HTML : <button type="button" onclick="$videoCheckReverse('video_sample1',videocheckreverse_1)">監視を開始</button> <button type="button" onclick="$videoCheckReverse('video_sample1',videocheckreverse_1,true)">設定を削除</button> <div id="sample1"> <video id="video_sample1" src="images/mov_1.mp4" poster="images/mov_1.jpg" preload="auto" controls playsinline> <p>PENTACON auto 50mm F1.8</p> </div>
Javascript : var working=false; var tarP=$tag("p","sample1",0); function videocheckreverse_1() { //逆方向に操作されたら実行する if(!working) { working=true; //短時間での繰り返し実行を防止するためにフラグを立てる tarP.style.background="#8eb8bd"; $toHTML(tarP,"逆方向に操作されました"); setTimeout(videocheckreverse_reset,2000); //関数実行の2秒後にリセット } } function videocheckreverse_reset() { working=false; tarP.style.background="#666666"; $toHTML(tarP,"PENTACON auto 50mm F1.8"); }
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。