New to imgix ? 🎉  See how we'd do on your website →
始める推奨事項Web向けに動画を標準化

Web向けに動画を標準化

動画APIはさまざまな動画形式/コーデックを受け入れますが、ほとんどの動画ファイルはストリームに適した形式に変換されます。これを行うには、imgixは動画を正規化してから動画APIを介して処理します。このプロセスには時間がかかるため、動画は正規化され、サービスによって処理されるまでストリーミングできません。動画APIを使用して動画を提供する前に、自分で標準化することもできます。事前に動画を標準化することで、動画APIのパフォーマンスを向上させる可能性があります。

以下は、動画の標準入力に関する要件です。非標準の動画入力の場合、imgixはすべての標準入力が満たされるように動画を処理します。

受け入れ可能な動画ファイル形式

次の動画入力形式を受け入れます：

  • video/mp4
  • video/quicktime
  • video/webm
  • video/x-m4v
  • video/x-msvideo
  • video/x-ms-wmv
  • video/x-ms-asf

標準入力

  • 1080p/2Kまたはそれ以下: 解像度が2048x2048までの動画は標準と見なされ、1080p（1920x1080）の動画も含まれます。これを超える動画は2048x2048に正規化されます。
  • H.264動画コーデック: H.264は今日最も使用されている動画コーデックであり、ほぼすべてのデバイスでサポートされています。imgixは他のコーデックも入力として受け入れますが、すべての他のコーデックをH.264に正規化します。

    オリジンファイルにはH.264コーデックの使用を強くお勧めします。H.264を使用すると、最高のパフォーマンスと品質が得られます。処理時間も短縮されます。

  • 最大10秒のキーフレーム間隔: HTTPベースのストリーミング方法（例：HLS）を使用してストリーミングするには、キーフレーム間隔を10秒未満にする必要があります。それが大きい場合は、10秒未満に制限されます。
  • クローズドGOP（group-of-pictures）: クローズドGOP以外の動画は、クローズドGOPに正規化されます。クローズドGOPはほとんどの動画入力のデフォルトです。そのため、最適化を試みており、どこにこの設定があるかわからない場合は、おそらく無視して問題ありません。
  • 8Mbps以下: ビットレートは8Mbps以下に正規化されます。また、ビットレートは1つのGOPあたり16Mbpsを超えてはいけません。これは、より高いビットレートがほとんどのユーザー接続にとって通常難しいためです。
  • 8ビット4:2:0以下: カラーデプスとクロマサブサンプリングは8ビット4:2:0に正規化されます。これにより、ハイダイナミックレンジ動画（HDR）はSDRに正規化され、ビデオ出力に色変化が生じる可能性があります。
  • シンプルな編集決定リスト: 複雑なEDL（Edit Decision List）を持つポストプロダクションで追加されたEDLは、シンプルなEDLに正規化されます。
  • フレームレートが5から120の間: 10から120の範囲内のビデオフレームレートは保持されます。10 fps未満または120 fpsを超えるビデオは、30 fpsに正規化されます。
  • 正方形ピクセルアスペクト比: ピクセルアスペクト比は、ピクセルの幅とそのピクセルの高さの比率です。値1:1は正方形ピクセルアスペクト比を表します。他の値を持つ動画は、1:1の正方形ピクセルアスペクト比に正規化されます。
  • AACオーディオコーデック: AACは今日最も使用されているオーディオコーデックであり、ほぼすべてのデバイスでサポートされています。imgixは他のオーディオコーデックも入力として受け入れますが、他のオーディオコーデックはAACオーディオに正規化されます。
  • 12時間以下の長さ: 任意の動画の最大ビデオ長は12時間です。動画がこれより長い場合、短縮されます。

標準入力用の動画の変更

動画APIで動画を提供する前に動画を標準化する場合は、さまざまなツールを使用して行うことができます。

ffmpegの使用

ffmpegは、動画ファイルを変更するために使用できるオープンソースのCLIツールです。imgixの動画APIを使用する前に動画を正規化するには、次の手順に従います。

  1. ffmpegをインストールします
  2. CLIを使用して、動画ファイルがある場所に移動します
  3. input.mp4が動画ファイルであり、out.mp4が保存する出力ファイルであると仮定します。次のコマンドを実行します：
ffmpeg -i input.mp4 -c:a copy -vf "scale=w=min(iw\,1920):h=-2" -c:v libx264 \
-profile high -b:v 7000k -pix_fmt yuv420p -maxrate 16000k out.mp4

これを使用して、imgixの標準入力ガイドラインを満たす限り、さまざまなプリセットを使用して自由に変更できます。

モバイルデバイスを使用する

ほとんどのモバイルデバイスは、デフォルトでH.264 8ビット4:2:0ビデオをキャプチャしますが、動画APIを使用して提供される動画を録画する際に注意する点がいくつかあります。

  • 合計ファイルビットレートは8 Mbps未満である必要があります。
  • HDR（ハイダイナミックレンジ）の代わりにSDR（標準ダイナミックレンジ）を使用して録画します。
  • 出力ファイルは1080pである必要があります。大きい場合（4kなど）、imgixは動画を1080pで提供されるようにリスケールします。

再度強調しますが、動画を標準入力ガイドラインに合わせる必要はありませんが、動画処理時間と入力を完全に最適化する場合は行うことができます。

非標準入力

imgixビデオの標準に準拠していない場合でも、imgixは動画を変換して提供できます。

ただし、非標準の動画入力の場合、imgixは変換前に動画入力を正規化する必要があります。これは、非正規化された動画が次のようになります：

  • 標準化プロセスにより処理に時間がかかります
  • 標準入力フォーマット設定が適用されます
    • たとえば、含まれているフレームレートが標準（10〜120 fps）であれば、imgixはそれを尊重します。標準ではない場合は、30 fpsに変換されます

Web上での動画の再生

動画APIを使用することで、任意の主要なプラットフォームやデバイスで再生できるストリーム可能な形式に動画を変換できます：Webブラウザ、モバイルアプリ、テレビ。

以下の例では、hls.jsを使用して、どのウェブページでも再生できる埋め込み可能なウェブプレーヤーを作成しています。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 
<video
  id="my-player"
  controls
  style="width: 100%; max-width: 1500px;"
  crossorigin="anonymous"
/>
 
<script>
  const video = document.querySelector("#my-player")
  const src =
    "https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?fm=hls"
  if (video.canPlayType("application/vnd.apple.mpegurl")) {
    video.src = src
  } else if (Hls.isSupported()) {
    const hls = new Hls()
    hls.loadSource(src)
    hls.attachMedia(video)
  } else {
    console.error(
      "This is a legacy browser that doesn't support Media Source Extensions",
    )
  }
</script>

これにより、次のビデオ要素が作成されます：

HLSを使用すべき理由

HLS（HTTP Live Streaming）形式は、適応型ビットレートストリーミングを使用します。これは、HLSビデオを視聴しているクライアントの接続強度を測定する方法です。一度測定されると、ビデオ品質は接続の強度に応じて動的に調整されます。この方法では、ビデオの間接続を継続的に測定し、バッファリングを減らしながら最適な品質を提供するように調整します。

MP4ビデオは適応型ビットレートストリーミングの方法を使用しません。HLSはMP4ビデオのこの問題を解決するため、MP4ビデオを約10秒の短いクリップに分割します。これにより、HLSはクライアントのインターネット接続を継続的に確認し、ビデオをレンダリングする最適な品質を決定します。

HLSビデオサポートは、ほとんどのデバイスとWebブラウザで利用できます。

HLSを使用するには、ビデオURLクエリに fm=hls または format=hls を追加する必要があります。

オリジンからの配信を確保にするOrigin Imagesの理解