1

popcorn.js を見始めたところですが、問題が発生しています。

30秒のトラックがあります。

ただし、ファイルの再生を 2 秒から開始し、終了の 3 秒前に再生を停止したいと考えています。

ドキュメントで見つけられなかったので、これが可能かどうか知っている人はいますか?

それか、タイムラインのポイントにジャンプするコマンドがあるので、ほとんど同じです

pop.playAt('2 second');

そんな感じ？

ありがとう

4

1 に答える 1

5

ここには 2 つの簡単な手順があります: 1) ビデオを 2 秒に進めます 2) 27 秒で停止することを確認します (30 - 3)

ビデオを進めるには currentTime メソッドを使用できますが、ビデオ メタデータが読み込まれる前に currentTime を設定しようとすると、エラーが発生します。(最初に動画を設定するとき、ブラウザーはヘッダーを取得するまで継続時間がわからないため、継続時間より後で currentTime を設定することはできません。)

var popcorn = Popcorn('#video');
if (popcorn.duration()) {
  popcorn.currentTime(2);
} else {
  popcorn.on('loadedmetadata', function() {
    popcorn.currentTime(2);
  }
}

ここで、ビデオが 27 秒で停止することを確認するために、「キュー」メソッドを使用できます。このメソッドは、その時点で起動するのに数秒かかり、コールバック関数を呼び出します。

popcorn.cue(27, function() {
  popcorn.pause();
});

デフォルトでは、Popcorn はビデオから「timeupdate」イベントを受信するとイベントを発生させます。これは通常 1/4 秒 (250ms) ごとです。そのため、ビデオが数フレーム長く表示される場合があります。(たとえば、27.1 秒で停止する場合があります)。より正確な精度が必要な場合は、frameAnimation オプションを使用します。これにより、ポップコーンは最大 60 fps (16 ミリ秒ごと) まで更新しようとします。

var popcorn = Popcorn('#video', {
  frameAnimation: true
});

URL にアンカーの形式でヒントを追加することにより、必要なビデオの部分のみを Web サーバーに要求するようブラウザーに指示することで、読み込み時間を節約することもできます。

http://example.com/videos/myvideo.webm#t=2,27

これは、ブラウザーと Web サーバーのサポートに依存しますが、害はありません。

編集:実際には、ここでは frameAnimation を使用しないでください。問題は、それが requestAnimationFrame を使用していることであり、ブラウザのタブが表示されていない場合に呼び出されることを保証できません。アニメーションには意味がありますが、ここでは意味がありません。おそらく popcorn.js でこれを修正することを提案します。

于 2012-11-01T16:31:10.117 に答える