1

BigVideo.js jQuery プラグインを使用して、全画面の背景ビデオを表示しています。クリックするとさまざまな背景ビデオをロードするリンクがあります。各ビデオ (3 ～ 5 秒の長さ) の最後に、アニメーションをロードしています。各ビデオには、上部に独自のアニメーションがあります。

現在、ビデオの長さに対応するタイムアウトでアニメーションをフェードインしていますが、完全な証拠ではありません. 私が本当に必要としているのは、終了#anim03時にフェードインすることです。video-03.mp4しかし、BigVideo.js.on("ended")イベントが実際にどのように機能するのか正確にはわかりません。私が以下に持っているコードでは（簡略化）：

// init plugin
var BV = new $.BigVideo({useFlashForFirefox:false});
BV.init();

function setupVideo(url) {
  if (Modernizr.touch) {
    BV.show(url + '.jpg');
  } else {
    BV.show(url + '.mp4',{
      altSource: url + '.webm',
      ambient: false
    });
  }
}

function setupAnimation(num) {
  BV.getPlayer().on("ended", function () { // event from video.js API - when video ends playing
    $('#anim0' + num).animate({ opacity: 1 });
  });
}

$('a').on('click', function(e) {
  e.preventDefault();
  // we remove .ext cause we got to setup .webm and .jpg versions
  var url = $(this).attr('href').replace('.mp4', ''); 
  setupVideo(url);

  var current = $(this).parent().index()+1;
  setupAnimation(current);
});

イベントはトリガーされますが、何らかのキューを通過して複数回発生するようです。そのようなconsole.log の場合num:

function setupAnimation(num) {
  console.log(num);
  BV.getPlayer().on("ended", function () {
    $('#anim0' + num).animate({ opacity: 1 });
  });
}

単一の期待値を取得します。しかし、私がそのようにすると：

function setupAnimation(num) {
  BV.getPlayer().on("ended", function () {
    console.log(num);
    $('#anim0' + num).animate({ opacity: 1 });
  });
}

次に、複数の値を取得しnum、クリックしてこの関数が呼び出されるたびに、ますます多くの値を取得します...これは.on("ended")、配列または何かをループしていると思いますか? プラグインのコードを見てもその部分がわかりません。

どんな助けやポインタも大歓迎です!

4

1 に答える 1

3

プレーヤーの「on」関数を使用する場合、新しいリスナー関数を登録します (これにより、何かが発生したときに複数の関数をトリガーする可能性が与えられます)。

「終了」関数が複数回起動する理由は、setupAnimation が実行されるたびにリスナー関数の新しいインスタンスが追加されるためです。

function () {
    console.log(num);
    $('#anim0' + num).animate({ opacity: 1 });
}

Video.JS の API ドキュメントを確認して ください https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#on-type-fn-

あなたが達成しようとしていることが正しければ、解決策は「クリック」機能の外で「setupAnimation」を実行することです。

于 2014-02-14T13:52:57.123 に答える