動的に最初のフレームをHTML5ビデオのポスターとして使用していますか？

Question

フレームを抽出するためのバックエンドコードを必要とせずに、この効果を達成するための簡単な方法があれば、jpgとして保存し、どこかでデータベース化することをお勧めします。

ビデオの最初のフレームがポスターとして表示されるような効果は、ビデオのロードが非常に役立つでしょう（ブラウザがビデオを明らかに再生できる場合にのみ機能します。 poster伝統的に動作しますが、それは問題ではない。

Answer 1

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

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

このプラグインを使用したポスターを作成するためのコードは非常に簡単です：あなたは、自動的にビデオの最初のフレームをロードするためにビデオ要素にpreload='auto'を設定することができ

// 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(); 

}); 

Answer 2

。

Answer 3

私は最近、デスクトップとモバイルで動作する最近のプロジェクトでこれを行いました。そのトリックはiPhone上で動作するようになっていました。

設定preload=metadataは、デスクトップおよびAndroid搭載端末では動作しますが、iPhoneでは動作しません。

iPhoneの場合、私はautoplayに設定しなければならなかったので、ポスター画像が最初の読み込み時に自動的に表示されるようにしました。 iPhoneはビデオの自動再生を妨げますが、結果としてポスター画像が表示されます。

ここで見つけたPavanの答えを使ってiPhoneのチェックをしなければなりませんでした。 Detect iPhone Browser。次に、デバイスに応じてautoplayの有無にかかわらず、適切なビデオタグを使用します。

var agent = navigator.userAgent; 
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ; 

$videoTag = ""; 
if(isIphone()) { 
    $videoTag = '<video controls autoplay preload="metadata">'; 
} else { 
    $videoTag = '<video controls preload="metadata">'; 
}