ビデオの始め方

Imgix Video API を使用すると、画像に使用しているのと同じ Source から動画を配信、変換できます。画像を変換するのと同じように、URL パラメータを使って動画のリサイズ、クリップ、サムネイル生成、再エンコードを行えます。新たに準備するものはありません。動画は既存の .net ドメインで配信され、カスタムドメインにも対応し、最初にリクエストされたときにオンデマンドで処理されます。

Imgix Video は、クリップ、GIF、背景動画などのショートフォームコンテンツに最適です。利用可能なすべてのパラメータについては、Video API リファレンス を参照してください。

はじめる前に

動画ファイルを保存しているストレージに接続された Source が必要です。どの Source でも動画を配信できるため、すでに Imgix で画像を配信している場合は、追加の設定なしで同じ Source から動画を配信できます。配信したい動画が含まれる Origin を Source に指定するか、他のアセットと同じ方法で動画をアップロードしてください。

最初の動画を配信する

動画を配信するには、Imgix ドメインからリクエストし、fm=mp4 を追加します。fm パラメータは Imgix Video を有効にし、出力フォーマットを設定します。

https://assets.imgix.net/videos/northern-lights.mp4?fm=mp4

MP4 は最も広くサポートされているフォーマットで、ブラウザでネイティブに再生できます。Imgix Video は、アダプティブな HLS および DASH ストリームのほか、json メタデータや spritesheet 出力にも対応しています。

動画を変換する

動画の変換は画像の変換と同じように機能します。URL にパラメータを任意の順序で追加します。特によく使われるものをいくつか紹介します。

• リサイズ: w と h。
• クリップ: video-clip-start と video-clip-end でセグメントを切り出します。
• サムネイル生成: video-thumbnail。
• 画質とファイルサイズの制御: video-bitrate、video-codec、video-aq。

ビットレート、コーデック、画質設定の選び方については、Imgix Video の最適化を参照してください。

サイトで動画を再生する

MP4 ファイルは、標準の <video> 要素を使ってどのブラウザでも再生できます。HLS や DASH によるアダプティブストリーミングには、Imgix の ix-player カスタム要素など、それらのフォーマットに対応したプレーヤーを使用してください。

<!-- Note: type 'module' here is important -->
<script
    defer
    type="module"
    src="https://static.imgix.net/ix-player/@latest/dist/ix-player.mjs">
</script>
<ix-player
    gif-preview
    type="hls"
    src="https://assets.imgix.net/videos/girl-reading-book-in-library.mp4?ixembed=docs&fm=hls">
</ix-player>

Click here to modify this in a CodeSandbox.

詳しい手順については、ユーザーフレンドリーなビデオプレーヤーの作成を参照してください。

動画を管理する

動画は、他のアセットと同じライフサイクルに従います。

• 動画の更新: 更新した動画は新しいファイル名で配信することをおすすめします。同じファイル名を維持する場合は、Origin のファイルを置き換えたうえで、変更をすぐに反映させるために古い URL をパージしてください。
• 動画の削除: Origin からファイルを削除します。すぐに反映させるには URL をパージしてください。パージしない場合は、通常どおりキャッシュの有効期限が切れると削除されます。

次のステップ

• すべてのパラメータについては、Video API リファレンスをご覧ください。
• ビデオプレーヤーの作成方法を学びましょう。
• 動画入力の正規化に関するベストプラクティスを確認してください。