LoginSignup
3
2

More than 3 years have passed since last update.

videojsでendedイベントが発火しない場合の対処法

Last updated at Posted at 2020-01-24

発生していた問題

  • videojsを利用して動画再生をしている
  • 動画再生が最後に達したら次のリストの動画を自動再生
  • ほとんどの動画で問題なく最後に達して次の動画が自動で再生ができるが、一部の動画だけが最後に達しても次の動画に遷移しない。
  • 使っていたvideojsのバージョンは7.6.0

問題が発生していたJSコード一部

var player = videojs("#videojs_element");
player.on("ended", function() {
   // ここで再生が終了したら次の動画へ遷移する処理を行っている
});

問題の分析

endedが発火しているのか確認

以下のコードでendedが発火するか確認したら、問題が発生する動画では、consoleにended startというログが出ない。

var player = videojs("#videojs_element");
player.on("ended", function() {
   console.log('ended start');
   // ここで再生が終了したら次の動画へ遷移する処理を行う。
});

timeupdateを入れて再生位置と終了位置をリアルタイムで監視

問題が発生する動画ではendedが発火しないので、videojsのtimeupdateというイベントを使って現在の再生位置と終了位置をリアルタイムで監視してみた。

var player = videojs("#videojs_element");
// ended部分はコメントアウト
//player.on("ended", function() {
//   // ここで再生が終了したら次の動画へ遷移する処理を行う。
//});
// 以下を追加
player.on("timeupdate", function(){
    var self = this;
    console.log(self.currentTime()+'='+self.duration());
});

問題が発生する動画ではコンソールログの結果を見るとcurrentTime()がduration()の値まで達していない。。。

251.9711=254.034
252.220862=254.034
252.470623=254.034
252.721052=254.034
252.970452=254.034
253.220424=254.034
253.470793=254.034
253.722037=254.034
253.941767=254.034

問題が発生しない動画のコンソールログの結果を見ると、currentTime()がduration()の値まで達している。

142.565163=144.203763
142.813788=144.203763
143.063869=144.203763
143.313899=144.203763
143.564323=144.203763
143.814652=144.203763
144.06434=144.203763
144.203763=144.203763

問題が発生する動画は、duration()の値の小数点以下の桁数が3桁までになっています。ちなみに、問題が発生する他の動画も小数点以下の桁数が3桁まででした。

対象方法

根本的な解決ではないかもしれませんが、endedイベントで終了処理を行うのではなく、timeupdate内で終了処理を呼び出すことにしました。
小数点以下の値が怪しいので、小数点以下は削って比較するようにしました。

var player = videojs("#videojs_element");
// ended部分はコメントアウト
//player.on("ended", function() {
//   // ここで再生が終了したら次の動画へ遷移する処理を行う。
//});
// 以下を追加
player.on("timeupdate", function(){
    var self = this;
    if (Math.round(self.currentTime())==Math.round(self.duration())) {
        // ここで再生が終了したら次の動画へ遷移する処理を行う。
    }
});

3
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2