【javascript】HTML5のvideoで指定秒数になるとアクションが起きる処理

Question

HTML5のvideoで再生後、指定秒数（例.5秒後）になったらアクションが起こるコードですが、下記のものだとアクションが起こりません...

var media = document.getElementById("hogehoge");
media.addEventListener("timeupdate", function(){
    if (media.currentTime == 5){
        --行う処理--
    }
}, false);

秒数の部分を不等号にすると、アクションが起こります。
（ただ、この場合は5秒以降アクションが起き続けるので役には立ちません...）

var media = document.getElementById("hogehoge");
media.addEventListener("timeupdate", function(){
    if (media.currentTime > 5){
        --行う処理--
    }
}, false);

動画再生後、5秒ピッタリになったらアクションが起きる処理したいのですが、良い方法はありませんでしょうか？

Answer 1

フラグでも良いと思うのですが、5秒過ぎたらイベントを削除する手もあると思います。

var media = document.getElementById("hogehoge");
function f(e) {
  if (media.currentTime >= 5) {
    --行う処理--
    media.removeEventListener("timeupdate", f, false);
  }
}
media.addEventListener("timeupdate", f, false);

Comments

[rossi46hiro]

ありがとうございます。
このやり方が一番素直な感じがしました。

Answer 2

少し無理やりですが、フラグを用意するのはどうでしょう。

var media = document.getElementById("hogehoge");
var isDoEvent = true;
media.addEventListener("timeupdate", function(){
    if (media.currentTime >= 5){
        if(isDoEvent){
            --行う処理--
            isDoEvent = false;
        }
    } else {
        isDoEvent = true;
    }
}, false);

初めて5秒以上になったら、処理を実行し、フラグをfalseにすることで5秒以降は実行しないようにします。

Comments

[orange0190]

上記のコードはリプレイ等は考えていません。

[rossi46hiro]

ありがとうございます！
なるほど、こういうやり方もあるのですね！

Answer 3

原因はmedia.currentTimeが1秒毎に整数値を返していないからですね。
私の環境では以下の様な感じでした。

5.141644
5.409659
5.640849
5.907866

ShunsukeIzuiさんの方法でやりたいことは可能でしょう。

Comments

[rossi46hiro]

なるほど、そういうことだったのですね！
>=5がOKで、=5がダメな理由が分からず？？？状態でした笑