3

ビデオに複数のキューポイントを設定しようとしています。各キューを書き出す代わりに、キューの時間やコールバックの処理に関する情報など、必要なデータを含むオブジェクトを繰り返し処理したいと思います。

問題は、オブジェクトを反復処理しようとすると、最後のキューを除くすべてのキューが上書きされることです。

var products = myVideo.products;
var video = Popcorn('#mainVideo');

    for (product in products){
        var obj   = products[product],
            start = obj.start,
            img   = obj.image,
            $targetDiv  = $("#"+obj.targetDiv);

        video.cue( start, function(){
            $('<img>', {
            class : "isImage",
            src : 'images/' + img
            }).prependTo( $targetDiv );
        })

    }

どんな助けでも大歓迎です。

4

1 に答える 1

3

このコードでは、すべてのキューに独自のコールバック関数がありますが、すべての関数は同じ変数imgと同じを参照します$targetDiv。それらが実行されるまでに、これらの変数は、の最後の項目のそれぞれの値に設定されますproducts。

jslintを介してコードを実行し、警告が表示された場合は、関数をループにしないでください。これが理由です。あなたがやろうとしていることをする良い方法は、それらの変数をすぐに呼び出されて別の関数、つまりコールバックを返す関数の中に置くことです。このような：

function makeCallback(obj) {
    return function() {
        $('<img>', {
        class : "isImage",
        src : 'images/' + obj.img
        }).prependTo( $("#"+obj.targetDiv) );
    };
}

for (var product in products) {
    var obj = products[product];
    video.cue( obj.start, makeCallback( obj ) );
}

または、内部で同じことを行うforEachを使用することもできます。（Popcornは、配列とオブジェクトの両方を処理する独自のバージョンを提供します。）

Popcorn.forEach(products, function(obj) {
    video.cue( start, function(){
        $('<img>', {
        class : "isImage",
        src : 'images/' + obj.img
        }).prependTo( $("#"+obj.targetDiv) );
    });
});

このコードには別の問題があることに注意してください。それは、キューポイントを通過するたびにPopcornが新しい画像を作成することです。そのため、ユーザーがビデオの一部を再生するためにスキップして戻ると、画像が積み重なっていきます。また、画像が表示されるようになるまで画像の読み込みが開始されないため、ネットワーク接続が遅い場合は、手遅れになるまで画像が表示されない場合があります。

これらを処理する最良の方法は、通常、事前に画像を作成し、CSSで画像を非表示にしてから、Popcornイベントで適切なタイミングで画像を表示することです。あなたはあなたのためにあなたの重労働のほとんどをする画像プラグインの使用を検討するかもしれません。

于 2013-01-29T15:27:14.807 に答える