完全な Beaver Builder + ビデオ ホスティングの Swarmify ガイド

Beaver Builder を使用していますか? もしそうなら、Swarmify は、銀行を壊すことなく、Web サイトで高速でバッファのない、プロフェッショナルなビデオ体験を提供するのに役立ちます.

100 万以上の Web サイトを運営している Beaver Builder は、WordPress ユーザーの間で人気のあるドラッグ アンド ドロップ ページ ビルダーです。

ページ ビルダーは信じられないほど使いやすいだけでなく、初心者にも専門家にも愛される独自の機能セットが付属しています。

たとえば、次のページは 5 分もかからずに表示されました。

これは基本的に、数秒でインポートできる既製のテンプレートです。 次に、画像とテキストをコンテンツに置き換えれば、準備完了です。

Beaver Builder のテンプレートが気に入らない場合は、空白のページから自由に開始できます。 次に、コンテンツ ブロックを所定の位置にドラッグ アンド ドロップし、HTML を記述したりショートコードに苦労したりすることなく、ページの残りの部分を視覚的に偽造します。

過去に、Divi、Elementor、Brizy、Webflow などの他のページ ビルダーについて説明しました。 できる限りガイドをチェックしてください:)

今日は、Beaver Builder と Swarmify を使用して、高速で失速のないプロフェッショナルなビデオ エクスペリエンスを Web サイトに提供する方法を正確に示します。

学ぶべきことがたくさんあるので、さっそく始めましょう。

ビーバービルダーとは？

まずは、初心者のために Beaver Builder について詳しく学びましょう。

Beaver Builder は、WordPress のプレミアム ページ ビルダーです。 このツールは、レスポンシブな WordPress ページを視覚的に作成するのに役立ちます。

つまり、コンテンツ ブロックをドラッグ アンド ドロップしてページを作成します。 Beaver Builder ページ ビルダーを使用するために、以前のコーディング経験は必要ありません。

これは、ワークフローを合理化し、Web サイトを構築する際の時間を大幅に節約できるため、初心者にも専門家にも朗報です。

WordPress の最大の名前は Beaver Builder を愛し、信頼しています。

Beaver Builder の最も優れた点は、非常に使いやすく、数日ではなく数時間で WordPress Web サイトを構築できることです。

また、使いやすいからといって、Beaver Builder が他のページ ビルダーほど強力でないというわけではありません。 気の利いた機能の広範なリストのおかげで、これは堅牢なページビルダーです.

特徴、あなたは言いますか？

はい、Beaver Builder には次の機能があります。

• 100% レスポンシブ デザインにより、ページは複数のデバイスで美しく表示されます
• すべての WordPress プロジェクト用の Beaver Builder テーマ フレームワーク
• ランディング ページ、ホームページ、コンテンツ ページなどを作成するための多数の既製のテンプレート。
• Beaver Builder ドラッグ アンド ドロップ ページ ビルダー
• テキスト、画像、ボタン、見出し、ビデオなどを追加するための大量のコンテンツ ブロック。
• SmartVideoウィジェットを含む多数の WordPress ウィジェット
• 全体設定
• 必要に応じてカスタム HTML、CSS、および JavaScript
• キーボードショートカット
• ヘッダーとフッターを含む、Web サイトのあらゆる部分をカスタマイズするための Beaver Themer アドオン
• ウェブサイトのデザインを完全にコントロール
• 幅広いWordPressテーマに対応
• WordPress.org でプラグインとして利用できる無料バージョン
• ワールドクラスのサポート
• マルチサイト対応
• ホワイトラベリング
• その他

Beaver Builder は、美しくレスポンシブな WordPress Web サイトを簡単に作成できる強力なページビルダーです。 初めての場合は、無料版を試して、後でプロ プランにアップグレードできます。

初心者のサイト所有者、プロのフリーランサー、クリエイティブエージェンシーに最適な3つの価格パッケージを提供しています. すべてのパッケージで、無制限の数の Web サイトで Beaver Builder を使用できます。

全員が同じページにいるので、Swarmify の SmartVideo に移りましょう。

Swarmify SmartVideo とは?

Swarmify は、Netflix 品質のストリーミングをシンプルなパッケージですべての人に提供することに重点を置いたビデオ アクセラレーション企業です。 当社の SmartVideo プラットフォームは、ビデオ展開を取り巻く複雑で高価な可動部分をすべて簡素化します。

SmartVideo は、YouTube、Dropbox、Amazon S3、Google Cloud など、保存場所に関係なく、動画のアップロード、エンコード、ホスティング、および配信を自動的に処理します。

SmartVideo を Swarmify する理由

Swarmify SmartVideo プラットフォームは、企業がビデオ ストリーミングで最も困難な問題 (バッファリングとストリーミングの品質) を解決するのに役立ちます。 また、SmartVideo は、YouTube の「いいね」が、リンクを満載したビデオ プレーヤーを使用してトラフィックを吸い上げるのを防ぎます。

当社の配信ソリューションのおかげで、業界の平均的なプレーヤーよりも 12 倍高速に動画を配信できます。 同じ配信プラットフォームでも、失速を 8 分の 1 に減らすことができます。

「Swarmify SmartVideo は 2017 年 5 月に開始されました。毎月、大幅な成長を遂げています。 YouTube を使用する実際のコストを認識している企業が増えています。 SmartVideo 以前は、当社のソリューションは大規模なエンタープライズ企業のみが利用できました。 Swarmify の CEO である Nathan Barnett 氏は次のように述べています。 「ウェブサイトの読み込みが速くても、動画の読み込みが遅い場合でも、顧客を失うことになります。」 ソース: YourStory.com

SmartVideo は、Beaver Builder の Web サイトで、高速でバッファのない高品質のビデオを配信するのに役立ちます。 リンクやサードパーティのブランドを含まないすっきりとしたビデオ プレーヤーを提供し、Web サイトの訪問者にプロフェッショナルなビデオ体験を提供できます。

SmartVideo を最高のビデオ アクセラレーション プラットフォームにする機能の一部を次に示します。

• クリーンで気を散らすものがないビデオ プレーヤー - YouTube やその他のプラットフォームでは、トラフィックを吸い上げるためのリンクがプレーヤーに散らばっています。 SmartVideo プレーヤーはクリーンで、カスタマイズ可能で、リークがありません。
• 自動 YouTube および Vimeo 変換 - Beaver Builder サイトで既に YouTube または Vimeo ビデオを使用している場合、WordPress プラグインをインストールするとすぐに SmartVideo がすべてのビデオを自動的に変換します。
• すべてのデバイスで最適化されているため、動画はどのデバイスやブラウザでも表示できます。
• 無制限の帯域幅とストレージ
• 高速、バッファフリー、失速防止の再生
• 優秀でフレンドリーな開発者による継続的なサポート
• 怪しげな契約のないシンプルな料金体系
• ビデオ エンゲージメント分析
• 世界のどこにいても超高速の動画をユーザーに配信するグローバル動画 CDN
• 等。

Swarmify SmartVideo は、ビデオ アクセラレーション分野のゲーム チェンジャーです。 私たちは多くの実務経験と専門知識をテーブルにもたらします。

さらに、次のセクションで説明するように、Beaver Builder Web サイトに SmartVideo をインストールするのは非常に簡単です。 しかし、行き詰まってしまった場合は、いつでもご連絡ください :) いつでも喜んでお手伝いいたします。

早速、Beaver Builder の Web サイトに SmartVideo をインストールしましょう。

注意:次のセクションでは、有効な Swarmify アカウントが必要です。 まだアカウントを持っていませんか? 今すぐ作成して、限定の 50% 割引をご利用ください。

Swarmify SmartVideo を Beaver Builder Web サイトと統合する方法

Beaver Builder は WordPress で動作するため、無料の SmartVideo プラグインを使用します。 Swarmify アカウントを作成したら、SmartVideo WordPress プラグインをコンピューターにダウンロードします。

次に、WordPress 管理ダッシュボードにログインし、以下に示すように、 [プラグイン] > [新規追加] に移動します。

次に、[プラグインのアップロード] ボタンをクリックし、コンピューターから SmartVideo プラグインを選択して、 [今すぐインストール] をクリックします。

その後、プラグインを有効にします。

あなたのウェブサイトを Swarmify アカウントに接続する時が来ました。

どのように？

以下で強調表示されているように、WordPress の管理メニューでSmartVideoをクリックします。

SmartVideo ダッシュボードで、[構成] ボタンをクリックします。

これにより、次の構成ページに移動します。このページには、手順と、次に何をする必要があるかを正確に示すインタラクティブな GIF が含まれています。

しかし、手間を省くために、Swarmify アカウントにすばやくログインし、上部にあるSwarm CDNキーをコピーします。

WordPress の SmartVideo 構成ページに戻り、下にスクロールして、Swarm CDN キーを貼り付け、次に示すように、[ SmartVideoを有効にする] をクリックします。

とても簡単です。 あなたが困難に直面することはないと思います。 完了すると、上部に緑色のEnabledラベルが表示されます。

Beaver Builder Web サイトに SmartVideo ビデオを追加する方法を学習する前に、上記のページで利用可能な SmartVideo 設定のいくつかについて説明しましょう。

下のスクリーングラブで強調表示されているように、 [設定] タブをクリックします。

そうすると、次の設定ページにつながります。

各セクションについて簡単に見ていきましょう。 便宜上、セクションに適切な番号を付けました。

(1)一番上に、SmartVideo のオンとオフを切り替えるオプションがあります。 明らかに、最高のパフォーマンスを保証するために SmartVideo を常に有効にしておく必要があります。

(2) 基本オプション

2 番目のセクションには、SmartVideo プレーヤーとエクスペリエンスをカスタマイズするための基本的なオプションがいくつかあります。 利用可能なオプションは次のとおりです。

• YouTube と Vimeo の自動変換のオンとオフを切り替える- チェックボックスをオンにして、既にサイトにある YouTube と Vimeo の動画を自動的に変換します。 オンにして、そのままにしておきます。
• YouTube ソースから利用可能な場合はクローズド キャプションを表示する- 必須でない限り、このチェックボックスをオフのままにします。
• 背景ビデオと既存のビデオを最適化する - これをオンにすると、SmartVideo は既存のビデオと背景ビデオを最適化します。 オンにして、そのままにしておきます。
• 再生ボタンの形状を変更する- 一目瞭然。 デフォルト(またはHexagon )、 Rectangle、およびCircleの 3 つの形状を選択できます。 お好きな方をお選びください。 デフォルトの形状は私にとってはうまくいきます:)
• ビデオ プレーヤーのコンポーネントと Web サイトの色を一致させる色を選択する- ここでも、サイトでのビデオ プレーヤーの外観をカスタマイズできます。 ここからカスタムカラーを選択してください:)

その下には...

(3) 高度なオプション

設定ページを読み込むと、[詳細オプション]セクションが折りたたまれます。 タイトルをクリックしてセクションをロードすると、次のオプションが表示されます。

• 代替レイアウト方法のオンとオフを切り替える- このオプションは、ビデオのサイズ変更や全画面表示の問題が発生した場合に便利です。 チェックボックスにチェックを入れます。
• アップロード アクセラレーションのオンとオフを切り替える - 動画のアップロードに問題がある場合は、このオプションをオンに切り替えます。
• (プロ プランのみ) 透かしを設定する- ここでは、画像またはロゴをビデオ プレーヤーの透かしとして設定できます。 これはブランディングの目的に最適なので、最高の画像/ロゴを使用してください。
• (プロ プランのみ) VAST 広告 URL を追加- AdSense、DFP、SpotX などの広告で動画を収益化する場合は、ここに広告 URL を入力します。

適切な設定ができたら、ページの下部にある[設定を保存]をクリックすることを忘れないでください。

それでは、Beaver Builder ページにスマート ビデオを追加しましょう。

SmartVideo を Beaver Builder ページに追加する方法

説明のために、以前に示したのと同じページを使用しています。 上部のマークされた画像を SmartVideo に置き換えます。

SpaceX の YouTube チャンネルからSpaceX Launchesのビデオをお借りしました。 デモと同じ動画です （チェックアウトしてください）。

注: YouTube がソースである場合は、視聴への直接リンク ( https ://www. youtube.com/watch?v=gmJgW-yMAIg )。

埋め込みリンクを見つけるには、ビデオの下に移動して [共有] ボタンをクリックします。

その後、以下に示すように [埋め込み] ボタンをクリックします。

次に、表示されるポップアップ内に移動し、以下で強調表示されている埋め込みリンクをコピーします。

見る？ それはそれほど難しいことではありませんでした。

注意: YouTube チャンネルから動画を調達していて、動画が「非公開」に設定されている場合は、それを「限定公開」に変更してください。

その序文で、先に進みましょう。

Beaver Builder でページを開きます。

画像を置き換えるので、最初に [削除] アイコンをクリックして次のように削除する必要があります。

これにより、空の列が残ります。

プロのヒント: 私の場合のように画像を置き換えない場合は、上記の手順をスキップできます。 ビデオを追加する列または行が空であることを確認してください。 以前に Beaver Builder を使用したことがある場合、それは問題になりません。

次に、上部にあるコンテンツ モジュールの追加 ( + ) プラス アイコンをクリックします。

その後、 SmartVideoコンテンツ ブロックをビデオを配置する場所にドラッグ アンド ドロップします。

SmartVideo モジュールをドラッグ アンド ドロップすると、下に示す小さなボックスが表示されます。

このボックスでは、多くのことができます。 たとえば、ビデオ ソースを選択したり、いくつかの基本オプションと高度なオプションを制御したりできます。これについては、後で詳しく説明します。

次に、[ビデオ ソース] をクリックし、[ YouTube ] を選択して、埋め込みコードを貼り付け、[保存] をクリックします。この順序で:

良い。 保存をクリックする前でも、黄色の六角形の再生ボタンとビデオ プレーヤーが表示されています。

上部の [完了] をクリックしてから [公開] をクリックします。

プロのヒント: まだページで作業している場合は、下書きを保存できます。

フロントエンドでスマート ビデオをチェックすると、すっきりしたビデオ プレーヤーにビデオが表示されます。 以下に示すように、ビデオは Swarmify によって既に最適化され、高速化されています。

YouTube のブランディング、バッファリング、トラフィックを吸い上げるリンクはありません。 そうそう、動画を一時停止すると「おすすめ動画」も表示されません。 さらに、それはかなり速くロードされます:)

しかし、妙に小さく見えますが、これは Beaver Builder で列幅を変更していないためです。 列の幅を変更したり、適切なサイズになるまで移動したりできます。

列の幅をいじってコンテンツを編集した結果、このようになりました。"

悪くない。 やっぱり大きい方がいいです:)

次に、先ほど説明した基本オプションと高度なオプションについて話しましょう。 ほら？ ビデオを追加していて、素敵な小さなボックスがポップアップしたときは?

Beaver Builder 内の SmartVideo コンテンツ モジュール内をクリックします。

これにより、次のオプションが表示され、基本オプションと詳細オプションが表示されます。

サイトを Swarmify アカウントに接続したときに説明した基本オプションと高度なオプションとは異なり、上記のオプションを使用すると、プレイヤーの動作をカスタマイズできます。

これが私の言いたいことです。 [基本オプション] をクリックすると、次のように表示されます。

それを見てください！ ビデオ プレーヤーの幅、高さ、ビデオのインライン再生 (Safari OS ブラウザーに最適)、レスポンシブ デザインなどを制御するための多くのオプション。

自動再生などのコントロールもあります (これをオンにする場合は、ビデオの自動再生がミュートされていることを確認してください) 、 ミュート （ビデオはミュートで始まります） 、 ループ(ビデオが再生し続ける) や、コントロールをオフにするものさえあります (ただし、ユーザーが再生、一時停止、または音量を下げることができなくなり、煩わしいため、これを行わないでください)。

次に、次のような [ Advanced ] タブがあります。

繰り返しになりますが、ビデオ プレーヤーをさらにカスタマイズするためのオプションが満載です。 アニメーションの追加 (ページの読み込み時にビデオがバウンスするようにする)、ビデオ プレーヤーの周囲のスペースの設定などを行います。

繰り返しますが、いつものように、完了したら変更を保存することを忘れないでください。

最終的な考え

Beaver Builder は非常に洗練されたページ ビルダーです。 最初は想像以上に強力ですが、実際に使ってみると、最新の Web サイトを構築するための強力なツールがあることがすぐにわかります。

ただし、ビデオの最適化や高速化のために構築されているわけではありません。 それは単なるページビルダーです。 そこで、Swarmify SmartVideo ソリューションの出番です。Beaver Builder Web サイトで高速でプロフェッショナルなビデオ エクスペリエンスを提供するお手伝いをします。

ほとんどのビデオ ホストに伴う高額な費用、制限、技術的な課題はありません。

何かを省略しましたか？ いつでもご連絡ください。喜んでチャットいたします。