*** この製品は製造中止です ***
以前の投稿で、Wix ブログやウェブサイトで動画をより簡単に使用できるように、動画を変換してファイル サイズを縮小する方法を紹介しました.
この前回の記事は、独自のビデオ ファイルとウェブサイトのデザインに関連していましたが、今回の投稿では、ビデオ レコーダーをインストールして サイト訪問者からビデオを受信する方法を紹介します。 .
以下のスクリーンショットは Wix 用ですが、ここで説明する方法は、プラットフォームの管理者設定でカスタム コードを追加できる限り、他の Web サイト ビルダー プラットフォームで Web カメラ レコーダーを実行するためにも機能します。
Wix ビデオレコーダーの作成と追加
ユーザーはウェブカメラを使用して Wix サイトで直接動画を録画するか、ユーザーのコンピュータに既にある動画ファイルをアップロードすることができます。
どちらの場合も、動画は YouTube、Dropbox、Google ドライブ、Amazon S3、または Microsoft Azure アカウントに送信できます。 クリップを YouTube に送信すると、他のユーザーがアップロードしたクリップをウェブサイトに簡単に表示できます。 そこから Wix エディタを介して埋め込むことができるため、最も理にかなっています。
この Wix ビデオ レコーダーをセットアップするために、HTML5 ビデオと JavaScript ウェブカメラ API を利用しています。ユーザーやサイト訪問者から動画を収集するために Web サイトに埋め込むことができるウィジェットです。あらゆる種類のウェブサイトで利用できますが、Wix サイトで起動して実行するには、いくつかの特定の手順が必要です.
<時間>Wix 推奨 Clipchamp API のような録画および動画アップロード ウィジェットを埋め込む最良の方法は、バックエンド コードを使用することです。https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call を参照してください。
チームまたはウェブ代理店の開発者またはソフトウェア エンジニアは、https://help.clipchamp.com/collect/getting-started/initial-setup-of-the で説明されている手順と組み合わせて、これらの手順に従うことができます。 -clipchamp-api.
<時間>Web サイトのフロントエンドでカスタム コード ブロックを使用する 2 つ目の方法は次のとおりです。
1) Wix ウェブサイトの管理バックエンドにログインします
後の手順でサンプルの新しいページを作成し、コードをこのページの HTML 設定にコピーする必要があります。
2) 2 つ目のブラウザー タブで、無料で登録します。 Clipchamp ビデオ API のトライアル
一意の API キーを取得するには、API の試用アカウントに登録する必要があります。これは、後続のステップで必要になり、ユーザーの動画のアップロード ターゲットを設定します。サインアップにクレジット カードは必要ありません。試用版はいつでもキャンセルできます。
3) ユーザーの動画を送信するアップロード ターゲットとして YouTube を設定します
試用アカウントを開いた後、https://util.clipchamp.com/en/api-setup/integrations の API 設定で、YouTube をクリックします。 Clipchamp API を YouTube アカウントに接続して、ユーザーが送信した動画をチャンネルまたは特定のプレイリストにアップロードできるようにします。
4) https://util.clipchamp.com/en/api-setup/install にアクセスします
そのページには、サイトにビデオ録画ボタンを埋め込むために必要な 2 つのコード スニペットが表示されます。このページに記載されている手順は Wix 以外の Web サイトに適用されるため、無視してかまいません。あなたの場合、Wix で作成した新しいページの HTML エディターに両方のコード スニペットをコピー &ペーストする必要があります。
5) Wix で新しいページを作成し、「HTML 設定」を開きます
HTML エディターで、ステップ 4 の Clipchamp ページの最初のセクションのコード スニペットを次のように貼り付けます。
6) 次に、からコードをコピーしますHTML エディターの最初のスニペットのすぐ下にある 2 番目のセクション
7) 次に、HTML コードを埋め込んだページを保存してプレビューします
コードが正しく追加されていれば、プレビュー ページに新しい埋め込みビデオ録画ボタンが表示されます。やった！
8) 最後のステップとして、動画ボタン ドメインを承認します
レコーダーが機能するには、次のように Clipchamp API 設定で 2 つのドメインをホワイトリストに登録する必要があります:
最初のドメイン: Wix ページに埋め込まれた Clipchamp ボタンを表示するために Wix が使用している URL をコピーし、https://util.clipchamp.com/en/api-setup/domains で Clipchamp API 設定の承認済みドメインのリストに追加します。これは、ブラウザのアドレス バーに表示される URL（または「ドメイン」）ではなく（Chrome を使用していると想定しています）、ページの動画ボタンがある iframe の URL であることに注意してください。
このドメイン名を取得するには、マウス ポインターをページ プレビューの Clipchamp ボタンの数ピクセル下に移動し、右クリックして「フレーム ソースの表示」を選択します。 Chrome では、これにより新しいブラウザ タブが開きます。タブのアドレス バーに移動し、そこからドメイン名をコピーします。この例では、ドメインは次のようになります
2 番目のドメイン: このドメイン名は命名規則に従います yourwebsitename-wixsite-com.fileusr.com 、例えばmoestavern-wixsite-com.fileusr.com .それをあなたのウェブサイトの名前に合わせてClipchampのドメインリストに追加すると、記録ボタンが埋め込まれたWixテストページを公開して、正しく表示されるかどうかを確認できます.
この 2 番目のドメイン名は、Wix ページのソース コードからも確認できます
これら 2 つのドメイン名を Clipchamp API 設定に保存すると、Wix ページのビデオ レコーダーとアップローダー ボタンを使用できるようになり、訪問者は録画やその他のビデオを YouTube チャンネルに送信できるようになります。
9) 投稿された動画をサイトに表示する
他のユーザーから送信され、現在 YouTube チャンネルにある動画を使用してウェブサイトに表示する場合は、YouTube 動画を埋め込む方法について、Wix ヘルプの次の手順を参照してください。
まとめ
Wix を使用している場合、これらはサイト訪問者から動画を収集するために必要なすべての手順です。 Clipchamp ビデオ API アカウントにすでに登録している方のために、この件に関する簡単なヘルプ記事も書いていることに注意してください。
ウェブサイト ビルダーを使用していない場合は、HTML5 ビデオ API を任意のウェブサイトに埋め込むためのインストール手順について、この別のチュートリアルを参照してください。
クライアントと協力して、幅広いシナリオやあらゆる種類のウェブ プロジェクトに適したものにしました。これには、たとえば、オンライン ストアを運営している場合に顧客からビデオの証言を収集したり、ブログの読者からビデオ コメントを取得したりする機能が含まれます。
最後の注意事項 – 当社のビデオ レコーダー ウィジェットには幅広いオプションが用意されています。たとえば、ブランディングを独自のものに変更したり、色やその他のスタイル要素を調整したり、ビデオの入力および出力に関連する多くの設定を調整したりできます.
これらは専門家向けのオプションであるため、この投稿ではそれらについて説明しましたが、API ドキュメントを詳しく調べて、Wix ビデオレコーダーに追加するパラメータを決定してください.手順 6 で HTML エディターに挿入したコード スニペットに任意のオプションを追加できます。