62

フレームを抽出し、それをjpgとして保存し、どこかにデータベース化するバックエンドコードを必要とせずに、この効果を達成する簡単な方法があるかどうか疑問に思っています。

ビデオの読み込み時にビデオの最初のフレームがポスターとして表示されるという効果は非常に役立ちます (ブラウザがビデオを再生できる場合にのみ機能しますが、これはposter従来の動作とは少し異なる可能性がありますが、それは問題ではありません。

4

7 に答える 7

23

Popcorn.captureと呼ばれるPopcorn.jsプラグインがあり、HTML5 ビデオの任意のフレームからポスターを作成できます。

ドメイン間で要求されたリソースのピクセル データの読み取りを禁止するブラウザーによって課される制限があります (キャンバス API を使用してフレームの現在の値を記録します)。このアプローチが機能するためには、ソース ビデオは、それを要求しているスクリプトおよび HTML ページと同じドメインでホストされている必要があります。

このプラグインを使用してポスターを作成するコードは非常に単純です。

// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );

// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {

  this.currentTime( 10 ).capture();

});
于 2011-09-06T16:34:10.067 に答える
8

preload='auto'ビデオの最初のフレームを自動的にロードするように video 要素を設定できます。

于 2016-08-23T14:33:26.770 に答える