4

Web ベースのストップ モーション ビデオ プレーヤーを作成したいと思います。基本的に、毎秒 2 ～ 4 枚の画像を表示するスライドショーです。各イメージは最大 20KB です。何千もの画像がある可能性があるため、スライドショーのすべての画像をプリロードしたくありませんが、ショーの次の画像だけでなく、それ以上の画像をプリロードする必要があります。一度に複数の画像をロードします)。

addSlide タイプの関数で jQuery Cycle Plugin ( http://malsup.com/jquery/cycle/ )を使用することを検討してきましたが、それを機能させる方法がわかりません。

このようなものがうまくいくでしょうか？-スライドショーが開始されます -画像が再生されます -プリローダーは次の 60 枚の画像までロードを試みます -再生は順番にある次の画像が完全にロードされるまで待機しますが、他の 59 枚すべてを待機するわけではありません。

このアプリケーションでは、再生/プリロードの順序が重要です。

4

4 に答える 4

1

使用可能な正確なコードはありませんが、フレームワークについて説明できます。私は jQuery で非常に似たようなことをしましたが、それは Javascript ほど jQuery ではありません。これが私がやったことの基本です...

画像を「プリロード」する関数を作成します。Javascript でこれを行う方法は、単純に Image 要素を作成することです。

  `function preloadAnImage(src) {
    var i = new Image(1020, 492);
    i.src = src;
  }`

画像のリストを作成します。imagesToPreloadIndex = ['image1.jpg','image2.jpg'... ];

このキューで機能する関数を作成します。たとえば、次のようになります。

function preloadNextImage() {
    preloadAnImage(imagesToPreload.pop());   
    if (imagesToPreloadIndex.length > 0) {
      setTimeout(preloadNextImage, 300);
    }
  }

これにより、フレームワークが得られます。

これを画像の実際の表示と同期させる必要があります。すべてがうまくいく限り、これはうまくいきます。次に、読み込みが遅れている場合にどうするかを決める必要があります... フレームをドロップしますか、それともスライドショーの速度を落としますか? この戦略を実装するプラグインには詳しくありませんが、実装するのは楽しいでしょう。

于 2010-04-10T17:30:07.083 に答える
0

これはマルチプロセッシングでなければならないと想像できます。私が考えているのは、再生ロジックを画像のプリロードロジックから分割することです。それはこのように動作します...

イニシャライザを起動します。N枚の画像がプリロードされたら（この時点で恐ろしい「バッファリング」画面を表示できます）、2つの関数を呼び出します。

関数1-画像を表示し、タイマーを開始した後、次の画像を表示するために再度呼び出されます。1秒あたり4つの画像を使用すると、250ミリ秒ごとに自分自身を呼び出します。

機能2-タイマーを開始します。ここでは、「期待値」を操作できます。たとえば、15秒後に60枚の画像の処理が完了することが期待できます。したがって、7秒後、次の30または60の画像の読み込みを開始し、それらを画像配列に追加します。その間、他の関数はすでに存在する画像を表示し続けます。

もちろん、スタックオーバーフローやI / Oエラーを回避するために、Nth-1要素で再生を停止する関数1のリミッターが必要です。

これが役に立ったかどうかはわかりませんが、それが私が質問を理解した方法です。

于 2010-02-15T16:56:48.497 に答える
0

クライアントが画像を取得する速度を制御できないため、問題がありそうです。ビデオを使用する方が、おそらく簡単で満足のいく結果になるでしょう。

js でこれを機能させるには、プリロードされた画像の数が最小しきい値を下回る/上回るたびに再生を一時停止および再開できるバッファリング オブジェクトを作成する必要があります。フラッシュムービーのように。

于 2010-04-09T02:48:32.840 に答える