web-dev-qa-db-ja.com

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

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

動画の読み込み時に動画の最初のフレームがポスターとして表示される効果は非常に役立ちます（ブラウザが動画を明らかに再生できる場合にのみ機能します。これは、poster伝統的に機能しますが、それは問題ではありません。

javascripthtml5html5-videoposter
41
Damon

Popcorn.js というプラグインがあります Popcorn.capture というプラグインを使用すると、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();

});
19
Rick

以下を試しましたか？

秒単位の時間＃t = {seconds}をソースURLに追加するだけです：

<video width="300" height="150">
   <source src="testvideo.mp4#t=0.1" type="video/mp4" />
</video>

フレーム数を小さく保つために、秒の小数部（0.1）を選択しました。なぜなら、1秒を入れると、ビデオの最初の1秒（つまり、24フレーム以上....）を「プリロード」します。念のため ...

Chromeおよびデスクトップ上のFirefox :)で正常に動作します
動作しないAndroidモバイル、ただし:(
iOS、iPhone、IEまだテストしていませんか??

28
Juergen Fink

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

設定preload=metadataはデスクトップで動作し、Androidデバイスは動作しますが、iPhoneは動作しません。

IPhoneの場合、autoplayに設定する必要があったため、初期読み込み時にポスター画像が自動的に表示されます。 iPhoneはビデオの自動再生を防ぎますが、結果としてポスター画像が表示されます。

ここにあるPavanの答えを使用して、iPhoneのチェックを行う必要がありました。 iPhoneブラウザの検出 。次に、デバイスに応じて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">';
}
13
drumnbace

単純にするために、preload="metadata"をビデオタグに、最初のフレームの2番目に#t=0.5にビデオソース：

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>

幸運を祈ります！

10
coin hive

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

7
James Westgate

＃2、＃3などのフレームのソリューション。デフォルトフレームをリセットするには、使い捨てハンドラー.one（）をアタッチする必要があります。

<video width="300" height="150" id='my-video'>
   <source src="testvideo.mp4#t=2" type="video/mp4" />
</video>

$(function () {
     let videoJs = videojs('my-video');
     videoJs.one('play', function () {
          this.currentTime(0);
     });
});
1
Adilet Murzaliev