ビデオの雲のようなトリック-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

ビデオの雲のようなトリック

Joseph Gordon-Levitt

Apr 01, 2025 am 12:32 AM

ビデオの雲のようなトリック

ビデオを作成するのに時間がかかります。よく作られた5分間のビデオは、計画、録音、編集に何時間もかかることがあります。これは、サイト上の他のすべてのビデオと一致するビデオを作成することについて話し始める前です。

TheJamstack Explorersプロジェクト（Web開発者向けのビデオ主導の教育リソース）を引き受けたとき、品質と出荷の適切なバランスを見つけたいと思いました。ビデオ制作プロセスで何を自動化して、品質を犠牲にすることなくビデオコンテンツを作成するために必要なステップ数と数を減らすことができますか？

Cloudinaryの助けを借りて、ビデオを作成する人々のためにたくさんの追加の編集タスクを追加することなく、すべてのビデオコンテンツで一貫したブランディングアプローチを提供することができました。そして、ボーナスとして、将来ブランディングを更新すると、サイト全体ですべてのビデオブランディングを一度に更新できます。ビデオ編集は必要ありません。

「ビデオブランディング」とはどういう意味ですか？

Explorersサイト上のすべてのビデオをすべて一緒にフィットするように感じるために、各ビデオにいくつかの一般的な作品を含めます。

タイトルシーン
ジャムスタックエクスプローラーのブランディングを示す短いイントロバンパー（ビデオクリップ）
これがミッションの最後のビデオである場合、次のビデオにカウントダウンするか、「ミッションが達成された」を示す短いアウトロバンパー

最後までスキップ：ブランドビデオの見た目は次のとおりです

ブランディングを追加することの影響を示すために、ブランドなしでJamstack Explorersのビデオの1つを以下に示します。

このビデオ（およびベンホンからのこのビューミッション）は合法的に傑出しています！しかし、それは少し突然始まり、終了し、このビデオがどこに住んでいるのかはありません。

Adam Haldと協力して、各ビデオに場所の感覚を与えるのに役立つブランドビデオ資産を作成しました。すべてのExplorers Brandingを適用して同じビデオをチェックしてください。

私たちは同じ素晴らしいコンテンツを取得しますが、今では、これがより大きなストーリーの一部のように感じられる少し余分なVA-VA-voomを追加しました。

この記事では、Cloudinaryを使用してすべてのビデオを自動的にカスタマイズする方法を説明します。

Cloudinaryはこれをどのように可能にしますか？

Cloudinaryは、メディアを操作および変換するための強力なURLベースのAPIを提供するクラウドベースの資産配信ネットワークです。あらゆる種類の資産タイプをサポートしていますが、本当に輝いているのは画像とビデオです。

Cludynaryを使用するには、無料アカウントを作成してから、資産をアップロードします。この資産は、雲のようなURLで利用可能になります。

 https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg
                           ^^^^^^^ ^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^
                              | | |
                              VVV
                      クラウド（アカウント）名前バージョン（オプション）ファイル名

このURLは元の画像を指し、ビデオの雲のようなトリックタグおよびその他のマークアップで使用できます。

ファイルサイズを削減するためにファイル形式と品質を動的に調整します

この画像をWebサイトで使用していて、サイトのパフォーマンスを向上させたい場合は、WebP、Avifなどなどの次世代形式を使用して、この画像のサイズを削減することを決定する場合があります。これらの新しい形式ははるかに小さくなりますが、すべてのブラウザではサポートされていません。これは通常、ツールを使用してこの画像の複数のバージョンを異なる形式で生成し、要素または他の特殊なマークアップを使用して、古いブラウザーのJPGフォールバックで最新のオプションを提供することを意味します。

Cloudinaryを使用すると、URLに変換を追加するだけです。

 https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto/v1605632851/explorers/avatar.jpg
                                                ^^^^^^^^^^^
                                                      |
                                                      v
                                    自動品質とフォーマット変換

ブラウザで見られるものは視覚的に同一です：

ファイル形式と品質設定を自動（f_auto、q_auto）に設定することにより、Cludynaryはクライアントによってサポートされている形式を検出し、合理的な品質レベルで最も効率的な形式を提供することができます。たとえば、Chromeでは、この画像は97.6kbのJPGから15.4kbのWebpに変換されます。

さまざまな方法で画像を変換できます！

サイズ変更（w_150の「幅150pxにサイズを変更する」）や色の効果（e_grayscalefor "「グレースケール効果を適用する」）など、他の変換をさらに進めることができます。

 https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto,W_150,E_grayscale/v1605632851/explorers/avatar.jpg

これは、可能なことのほんの少しの味です。より多くの例を求めて、雲のようなドキュメントを必ず削除してください。

これをもう少し読みやすくするためのノードSDKがあります

私たちが取り入れようとしているようなより高度な変換のために、URLを手作業で書くことは少し読みにくいことがあります。最終的には、thecloudinaryノードSdktoを使用してコメントを追加し、各変換が何をしているかを説明することができます。プラットフォームを維持および進化させるにつれて非常に役立ちました。

インストールするには、Cloudinary APIキーとSecretをYourConsolleから取得し、NPMを使用してSDKをインストールします。

 ＃新しいディレクトリを作成します
Mkdir Cloudinary-Video

＃新しいディレクトリに移動します
CD Cloudinary-Video/

＃新しいノードプロジェクトを初期化します
npm init -y

＃CloudinaryノードSDKをインストールします
NPMインストールCludinary

次に、YourCloud_Nameand API資格情報でSDKを初期化する新しいファイルを作成します。

 Const Cloudinary = require（ 'Cloudinary'）。V2;

// todoこれらの値を独自の雲の資格情報に置き換えます
Cloudinary.config（{
  cloud_name： 'your_cloud_name'、
  api_key： 'your_api_key'、
  api_secret： 'your_api_secret'、
}）;

API資格情報をGitHubにコミットしたり、どこでも共有したりしないでください。環境変数を使用して安全に保ちましょう！環境変数に慣れていない場合、Colby Fayockは環境変数を使用するための優れた導入を書きました。

次に、わずかに人間の読み取り可能な構成設定を使用する前と同じ変換を作成できます。

 Cloudinary.uploader
  //最初の引数は、のパブリックID（フォルダーを含む！）である必要があります
  //変換したい画像
  .explicit（ 'Explorers/Avatar'、{
    //これらの2つのプロパティは、URLの開始と一致します。
    // https：//res.cloudinary.com/netlify/image/upload/...
    // ^^^^^^^^^^^^
    resource_type： 'image'、
    タイプ：「アップロード」、

    //「熱心」とは、回避するためにこれらの変換を事前に実行したいことを意味します
    //最初のロード時間が遅い
    熱心な： [
      {
        fetch_format： 'auto'、
        品質：「自動」、
        幅：150、
        効果：「グレイスケール」、
      }、
    ]、、

    //この変換された画像をキャッシュして、同じものを再実行しないようにします
    //変換は何度も何度も
    上書き：false、
  }）
  .then（（result）=> {
    console.log（result）;
  }）;

このコードをindex.jsinターミナルをtypingして実行しましょう。出力は次のようになります：

 {
  asset_id： 'fca4abba96ffdf70ef89498aa340ae4e'、
  public_id： 'Explorers/Avatar'、
  バージョン：1605632851、
  version_id： 'b8a923931af20404e89d03852ff1bff1'、
  署名： 'e7201c9ab36cb5b6a0545cee4f5f8ee27fb7f99f'、
  幅：300、
  高さ：300、
  形式： 'jpg'、
  resource_type： 'image'、
  created_at： '2020-11-17T17：07：31Z'、
  バイト：97633、
  タイプ：「アップロード」、
  url： 'http://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg'、
  secure_url： 'https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg'、
  Access_Mode：「public」、
  熱心な： [
    {
      変換： 'e_grayscale、f_auto、q_auto、w_150'、
      幅：150、
      高さ：150、
      バイト：6192、
      形式： 'jpg'、
      url： 'http：//res.cloudinary.com/netlify/image/upload/e_grayscale、f_auto,q_auto,w_150/v1605632851/explorers/avatar.jpg' '、
      secure_url： 'https://res.cloudinary.com/netlify/image/upload/e_grayscale,f_auto,q_auto,w_150/v1605632851/explorers/avatar.jpg' '
    }
  ]
}

EargerPropertyでは、変換されたURLとともに変換が表示され、変換された画像が表示されます。

ノードSDKはおそらくこのような簡単な変換のために過剰になりますが、ビデオブランディングを追加するために必要な複雑な変換を検討し始めると、本当に便利になります。

雲のようなビデオを変換します

Jamstack Explorersでビデオを変換するために、同じアプローチに従います。各ビデオはCloudinaryにアップロードされ、URLを変更してサイズを変更し、品質を調整し、タイトルカードとバンパーを挿入します。

ブランディングを追加するために取り組む変革にはいくつかの主要なカテゴリがあります。

オーバーレイ
遷移
テキストオーバーレイ
スプライシング

これらの各カテゴリを見て、ベンのビデオでジャムスタックエクスプローラーのブランディングを再現できないかどうかを確認しましょう！ upindex.jstoをセットアップして、ベースビデオを変換しましょう。

 Cloudinary.uploader
  .explicit（ 'Explorers/Bumper'、{
    //これらの2つのプロパティは、URLの開始と一致します。
    // https：//res.cloudinary.com/netlify/image/upload/...
    // ^^^^^^^^^^^^
    resource_type： 'Video'、
   タイプ：「アップロード」、

    //「熱心」とは、回避するためにこれらの変換を事前に実行したいことを意味します
    //最初のロード時間が遅い
    熱心な： [
      {
        fetch_format： 'auto'、
        品質：「自動」、
        高さ：360、
        幅：640、
        トリミング：「塗りつぶし」、//ビデオが異なる場合はレターボックスを避けます
      }、
    ]、、

    //この変換された画像をキャッシュして、同じものを再実行しないようにします
    //変換は何度も何度も
    上書き：false、
  }）
  .then（（result）=> {
    console.log（result）;
  }）;

Benのオリジナルビデオの代わりに「Bumper」というビデオを使用していることに気付いたかもしれません。これは、雲のような注文動画を一緒に追加する方法によるものです。次のセクションにベンのビデオを追加します！

2つのビデオをCloudinaryを使用してカスタムトランジションと組み合わせます

バンパーを追加するには、2番目のビデオをオーバーレイとして追加する2番目の変換「レイヤー」をEagerArrayに追加する必要があります。

これを行うには、TheOverLayTransformationを使用して、Tovideo：publicid、where publicidisは、コロン（:)に変換されたスラッシュ（/）を使用して資産の雲の公開IDを設定します。

また、2つのビデオ間をcluderinaryを移行する方法を伝える必要があります。これは、ビデオの黒い領域に1つのビデオをマスクし、白い領域で2番目のビデオをマスクできるLuma Matteと呼ばれる特別な種類のビデオを使用しています。これにより、様式化されたクロスフェードが発生します。

Luma Matteがそれ自体でどのように見えるかは次のとおりです。

ビデオと移行には両方とも独自の変換があります。つまり、雲の変換の異なる「レイヤー」としてそれらを扱う必要があります。これは、それらを個別のオブジェクトに分割し、追加のオブジェクトを追加して各レイヤーを「適用」することを意味します。これにより、そのセクションが完了し、メインビデオへの変換を追加し続けることができます。

Cloudinaryにこれを伝えるために、これはLuma Matteであり、別のビデオではなく、EffectType Totransitionを設定します。

以下の変更を加えてindex.jstoこれらすべてを配置します。

 const videabasetransformations = {
  fetch_format： 'auto'、
  品質：「自動」、
  高さ：360、
  幅：600、
  作物：「充填」、
}

Cloudinary.uploader
  .explicit（ 'Explorers/Bumper'、{
    //これらの2つのプロパティは、URLの開始と一致します。
    // <https:></https:> ...
    //
    resource_type： 'Video'、
    タイプ：「アップロード」、

    //「熱心」とは、回避するためにこれらの変換を事前に実行したいことを意味します
    //最初のロード時間が遅い
    熱心な： [
      videbasetransformations、
      {
        オーバーレイ： 'ビデオ：探検家：LCA-07-Lifecycle-Hooks'、
        ... videbasetransformations、
      }、
      {
        オーバーレイ： 'ビデオ：探検家：トランジション'、
        効果：「移行」、
      }、
      {flags： 'layer_apply'}、//  {
    console.log（result）;
  }）;

すべてのビデオで同じ形式、品質、サイジングの変換が必要であるため、それらをVideoBasetransformationsと呼ばれる変数に引き出してから、オーバーレイを含む2番目のオブジェクトを追加しました。

これをwithnode index.jsを実行すると、戻ってきたビデオは次のようになります。

悪くない！これはすでにJamstack Explorersサイトの一部であるように見え、その遷移は共通のバンパーからカスタムビデオへの素晴らしい流れを追加します。

Outro Bumperを追加すると、まったく同じように機能します。終了バンパーと遷移に別のオーバーレイを追加する必要があります。このコードはチュートリアルには表示されませんが、興味があればソースコードで表示できます。

テキストオーバーレイを使用してビデオにタイトルカードを追加する

タイトルカードを追加するには、2つの異なる手順があります。

タイトルカードの背景として機能する短いビデオクリップを抽出する
ビデオのタイトルでテキストオーバーレイを追加します

次の2つのセクションでは、各ステップを個別に歩いて、2つの間に区別が表示されます。

タイトルカードの背景として使用する短いビデオクリップを抽出します

Adam HaldがExplorers Video Assetsを作成したとき、彼はタイトルカードに最適な星空の空にオープンしているAbeautiful Intro Videothatを含めました。 Cloudinaryを使用して、その星空の空の数秒をつかみ、タイトルカードとしてすべてのビデオにスプライスできます！

inindex.js、次の変換ブロックを追加します。

 Cloudinary.uploader
  .explicit（ 'Explorers/Bumper'、{
    //これらの2つのプロパティは、URLの開始と一致します。
    // https：//res.cloudinary.com/netlify/image/upload/...
    //
    resource_type： 'Video'、
    タイプ：「アップロード」、

    //「熱心」とは、回避するためにこれらの変換を事前に実行したいことを意味します
    //最初のロード時間が遅い
    熱心な： [
      videbasetransformations、
      {
        オーバーレイ： 'ビデオ：探検家：LCA-07-Lifecycle-Hooks'、
        ... videbasetransformations、
      }、
      {
        オーバーレイ： 'ビデオ：探検家：トランジション'、
        効果：「移行」、
      }、
      {flags： 'layer_apply'}、//  {
    console.log（result）;
  }）;

ThespliceFlagを使用して、CludyNaryにこのビデオを直接追加するように指示します。

次の一連の変換で、これまで見たことのない3つの変換を追加します。

audio_codectononeToこのビデオのセグメントからサウンドを削除します。
setEnd_offsetto3をsetendします。つまり、ビデオの最初の3秒しか得られません。
25の値でtheaccelerate Effectを追加し、ビデオを25％遅くします。

runningNode index.jswillは、4秒弱の静かな星空から始まるビデオを提供します。

Cloudinaryを使用してビデオにテキストオーバーレイを追加します

最後のステップは、ビデオタイトルを表示するためにテキストオーバーレイを追加することです！

テキストオーバーレイは、他のオーバーレイと同じオーバーレイプロパティを使用しますが、フォントの設定を備えたオブジェクトを渡します。 Cloudinaryはさまざまなフォントをサポートしています。決定的なリストを見つけることができませんでしたが、多数のGoogleフォントのように見えます。カスタムフォントを使用するライセンスを購入した場合、テキストオーバーレイで使用するためにカスタムフォントをCloudinaryにカスタムフォントに使用できます。

 Cloudinary.uploader
  .explicit（ 'Explorers/Bumper'、{
    //これらの2つのプロパティは、URLの開始と一致します。
    // <https:></https:> ...
    //
    resource_type： 'Video'、
    タイプ：「アップロード」、

    //「熱心」とは、回避するためにこれらの変換を事前に実行したいことを意味します
    //最初のロード時間が遅い
    熱心な： [
      videbasetransformations、
      {
        オーバーレイ： 'ビデオ：探検家：LCA-07-Lifecycle-Hooks'、
        ... videbasetransformations、
      }、
      {
        オーバーレイ： 'ビデオ：探検家：トランジション'、
        効果：「移行」、
      }、
      {flags： 'layer_apply'}、//  {
    console.log（result）;
  }）;

フォントのサイズとアラインメントの設定に加えて、タイトルテキストがタイトルカードの側面にぶつからないように500px（デフォルトで中央に配置される）の幅を適用し、より長いタイトルをラップするTheCropValue Tofitを設定します。 thecolortowhitemakeを設定して、暗い星空の背景に対して見えるテキスト。

runnode index.jsto URLを生成すると、タイトルカードやバンパーなど、完全にブランドのビデオが表示されます。