jquery java videoタグ 特定の時間が過ぎたら処理する

Question

videoタグを使い動画を特定の時間が過ぎたら次の動画を再生したいという操作をおこなっているのですが
video.addEventListenerでtimeupdateした際、video.currentTimeが特定の時間になった時に次の動画を表示するfunctionを呼び出しているのですが二度処理が行われてしまって表示したい正しい動画が表示できないという問題があります

var video = document.getElementById('video');
video.addEventListener('timeupdate',function(){
    if(video.currentTime >= 10){
        video.pause();
        nextContent();//次の動画表示するfunctionの呼び出し
    }
},false);

if(video.currentTime >= 10){

//ここでconsoleに出力すると"test"が二度呼び出されている
console.log("test");
video.pause();
nextContent();
}

video.currentTime >= 10の部分を　video.currentTime == 10にした場合はvideo.currentTimeが10.0000028等になっているのが原因で動かきませんでした。
助言よろしくお願いします

--追記--
video.addEventListenerのtimeupdateの処理がif文を過ぎても動かしてしまっているのが原因だと理解したので

video.addEventListener('timeupdate',function(e){
if(video.currentTime >= 10){
video.pause();
nextContent();
e.stopPropagation();
}
},false);

e.stopPropagation();で処理を止めようとしたのですがダメでした。

Comments

[so87]

タイトルのjavaとjqueryは関係ないと思います。普通のjavascriptです。

Answer 1

video.pause()した時にもう一度timeupdateイベントが発火されているのかなと想定し、video.pause()する前にremoveEventListenerでイベントを削除してみると、１回反応になりましたよ。

/** removeEventListenerできるように名前をつけておく*/
function timeCheck()
{
	if ( video.currentTime >= 10 )
	{
		console.log( video.currentTime );
		/** ポーズする前にイベントリスナーを無効にしておく */	
		video.removeEventListener( 'timeupdate', timeCheck );
		video.pause();

		/** ここでnextContentを呼び出すと思いますが、
		 * removeEventListenerしているので都度addEventListenerで
		 * イベントを登録する必要がありますのでご注意を */
	}
}

var video = document.getElementById( 'video' );
video.addEventListener( 'timeupdate', timeCheck, false );

Comments

[so87]

windows版chromeとfirefoxのみ動作確認しました

[aizawal-hiroki]

解決しました！ありがとうございます

Answer 2

一番手っ取り早いのはvideo.currentTimeを小数点以下切り捨てにして、10とイコールになった時に発火でしょうか。

var video = document.getElementById('video');
video.addEventListener('timeupdate',function(){
    var timeFloored = Math.floor(video.currentTime);
    if(timeFloored == 10){
        video.pause();
        nextContent();//次の動画表示するfunctionの呼び出し
    }
},false);