3

URL を指定して動画のサムネイルを取得する JavaScript コードを見つけました。ただし、これは YouTube と Vimeo でしか見つかりませんでした。html5 video タグに埋め込むことを意図したビデオでそれを行う方法の例を挙げた人は誰もいないようです。それはできますか？ありがとう。

4

1 に答える 1

6

はい、キャンバスの画像ソースとしてビデオを使用できます。video と size を引数として取り、canvas 要素を返す関数としてコードをラップするだけです。

ビデオがロードされ、スナップショットを作成するフレームにある必要があります。

メソッドの例

function createThumb(video, w, h) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d");                // get context
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  return c;                                    // return canvas
}

キャンバスを DOM に挿入して、イメージ ホルダーとして使用できます。画像要素が必要な場合は、コールバック (またはプロミス) を使用して画像読み込みの非同期性を処理するだけでなく、さらにいくつかの手順を実行する必要があります。

function createThumb(video, w, h, callback) {
  var c = document.createElement("canvas"),    // create a canvas
      ctx = c.getContext("2d"),                // get context
      img = new Image();                       // final image
  c.width = w;                                 // set size = thumb
  c.height = h;
  ctx.drawImage(video, 0, 0, w, h);            // draw in frame
  img.onload = function() {                    // handle async loading
    callback(this);                            // provide image to callback
  };
  img.src = c.toDataURL();                     // convert canvas to URL
}

ビデオ フレームのサイズに問題がある場合は、 drawImage() 引数を次のように置き換えることができます。

ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, w, h);
于 2015-06-12T03:20:33.627 に答える