検索

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

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

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

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

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

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

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

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

ブランディングを追加することの影響を示すために、ブランドなしで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を変更してサイズを変更し、品質を調整し、タイトルカードとバンパーを挿入します。

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

  1. オーバーレイ
  2. 遷移
  3. テキストオーバーレイ
  4. スプライシング

これらの各カテゴリを見て、ベンのビデオでジャムスタックエクスプローラーのブランディングを再現できないかどうかを確認しましょう! 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つの異なる手順があります。

  1. タイトルカードの背景として機能する短いビデオクリップを抽出する
  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つの変換を追加します。

  1. audio_codectononeToこのビデオのセグメントからサウンドを削除します。
  2. setEnd_offsetto3をsetendします。つまり、ビデオの最初の3秒しか得られません。
  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を生成すると、タイトルカードやバンパーなど、完全にブランドのビデオが表示されます。

ビデオブランディングを一度構築します。どこでも使用してください

バンパー、トランジション、タイトルカードの作成は大変な作業です。高品質のビデオコンテンツを作成すること多くの作業です。これらのタイトルカードとバンパーを挿入するためにすべてのJamstack Explorersビデオを手動で編集する必要があった場合、実際にそれを行ったことはほとんどありません。

私たちは、ビデオを一貫してブランド化する唯一の現実的な方法は、ブランディングを追加する摩擦を調整することであり、Cloudinaryがそれを完全に自動化することであることを知っていました。これは、手動の手順なしに一貫性を保つことができることを意味します!

追加のボーナスとして、将来タイトルカードまたはバンパーを更新すると、コードを1か所で変更してすべてのビデオのブランディングをすべて更新できること意味します。これは私たちにとって大きな安reliefです。なぜなら、探検家は時間の経過とともに成長し、進化し続けることを知っているからです。

次に何をすべきか

Cloudinaryを使用してカスタムブランディングを追加する方法がわかったので、学習を続けるのに役立つ追加のリソースをいくつか紹介します。

  • このチュートリアルについては、TheSourceコードを参照してください。
  • ビデオブランディングについては、Jamstack ExplorersSourceコードを参照してください。
  • Cloudinaryのビデオ変換APIの詳細をご覧ください。
  • Web開発Onjamstack Explorersについて学びます。
  • Cloudinaryを使用してカスタムソーシャルメディア画像の作成方法を学びます。
  • ベンの完全なミッションを見て、それがすべて一緒になっている方法を見る!

Cloudinaryを使用して他に何を自動化できますか?ビデオ編集ワークフローの繰り返し部分を自動化することで、どれくらいの時間を節約できますか?私はまさにこのことについて話すのが大好きなオタクなので、Twitterであなたのアイデアを送ってください!

以上がビデオの雲のようなトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
CSSグリッドとは何ですか?CSSグリッドとは何ですか?Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

CSS Flexboxとは何ですか?CSS Flexboxとは何ですか?Apr 30, 2025 pm 03:20 PM

記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。

CSSを使用してWebサイトを応答するにはどうすればよいですか?CSSを使用してWebサイトを応答するにはどうすればよいですか?Apr 30, 2025 pm 03:19 PM

この記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています

CSSボックスサイズのプロパティは何をしますか?CSSボックスサイズのプロパティは何をしますか?Apr 30, 2025 pm 03:18 PM

この記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。

CSSを使用してアニメーション化するにはどうすればよいですか?CSSを使用してアニメーション化するにはどうすればよいですか?Apr 30, 2025 pm 03:17 PM

記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。

CSSを使用してプロジェクトに3D変換を追加できますか?CSSを使用してプロジェクトに3D変換を追加できますか?Apr 30, 2025 pm 03:16 PM

記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。

CSSに勾配を追加するにはどうすればよいですか?CSSに勾配を追加するにはどうすればよいですか?Apr 30, 2025 pm 03:15 PM

この記事では、CSSグラデーション(線形、放射状、繰り返し)を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。

CSSの擬似要素とは何ですか?CSSの擬似要素とは何ですか?Apr 30, 2025 pm 03:14 PM

記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。