このページの内容
以前の投稿では、動画を変換してファイルサイズを縮小し、Wixのブログやウェブサイトで簡単に使用できるようにする方法を紹介しました。
前回の投稿内容はあなた自身の動画ファイルを使用して、あなたのウェブサイトをデザインする際に役立ちましたが、今回の投稿では、サイト訪問者から動画を受けとるために動画レコーダーをインストールする方法をご説明します。
以下のスクリーンショットはWix向けですが、ここで説明する方法は、プラットフォームの管理者設定でカスタムコード を追加することで、他のホームページビルダーのプラットフォームでウェブカメラレコーダーを稼動させることも可能です。
Wix動画レコーダーの作成と追加
この方法では、ユーザーが、あなたのWixサイトを通して、自分のウェブカメラで直接、動画を録画したり、あるいは既に彼らがコンピューター上に保存している動画をアップロードすることが可能です。
受け取った動画は全てあなたのYouTube、Dropbox、Googleドライブ、Amazon S3またはMicrosoft Azureアカウントに送信できます。 また、サイト訪問者が、動画をアップロードした後、ウェブサイトにクリップを簡単に表示したい場合は、彼らがYoutubeに動画を送信する方法が最適であり、あなたはそれらの動画をWixエディタで埋め込むことができます。
このWix動画レコーダーを設定するために、私たちの制作したHTML5ビデオとJavaScriptのウェブカムAPIを利用することができます。 これは、ユーザーやサイト訪問者からビデオを収集するためにウェブサイトに埋め込んで使用できるウィジェットです。 どのような種類のウェブサイトでも利用可能ですが、Wixサイトで実行するためには具体的な手順に従った作業が必要とされます。
*************As recommended by Wix, the best way to embed a recording and video uploading widget like the Clipchamp API is via backend code, see https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call.
A developer or software engineer in your team or at your web agency will be able to follow these instructions in combination with the steps described at https://help.clipchamp.com/collect/getting-started/initial-setup-of-the-clipchamp-api.
*************A 2nd method using Custom Code blocks in the frontend of your website is described below. Note that it might not work in some circumstances, if that is the case then the method recommended by Wix through the backend code of your site is the best alternative.**************
1) ウェブサイトの管理バックエンドにログインします
後のステップでは、新規ページをサンプルとして作成し、このページのHTML設定にいくつかのコードをコピーする必要があります。
2) 2番目のブラウザタブで、ClipchampビデオAPIの無料トライアルに登録します
次のステップで必要となる固有のAPIキーを取得し、対象となる受け取りたい動画のアップロードを有効にするには、APIのお試しアカウントに登録する必要があります。 申し込みにはクレジットカードは必要なく、いつでもお試しをキャンセルすることができます。
register-clipchamp-trial
3) YouTubeをアップロードする対象に設定してユーザーの動画を送信します
お試しアカウントを開設したら、https://util.clipchamp.com/ja/api-setup/integrationsのAPI設定でYouTubeをクリックし、Clipchamp APIをYouTubeアカウントに接続して、ユーザーが投稿した動画をあなたのチャンネルまたは特定のプレイリストにアップロードできます。
4)次に、https://util.clipchamp.com/ja/api-setup/installにアクセスします
このページには2つのコードスニペットがあり、これは、あなたのサイトに動画録画ボタンを埋め込むために必要です。このページに記載されている説明は、Wixのものではないウェブサイトに適用されるので、無視することができます。あなたの場合は、両方のコードスニペットをコピーしてWixで作成した新しいページのHTMLエディタに貼り付けるだけです。
5) Wixに新しいページを作成し「HTML設定」を開きます
HTMLエディタで、ステップ4のClipchampページの最初のセクションのコードスニペットを次のように貼り付けます:
6) 次に、HTMLエディタの最初のスニペットのすぐ下にある2番目のセクションのコードをコピーします
7)次に、HTMLコードを埋め込んだページを保存してプレビューします
コードが正しく追加されると、プレビューページに新しい埋め込み動画録画ボタンが表示されます。できましたね!
8) 最後のステップとして、動画ボタンのドメインを承認します
レコーダーを作動させるには、以下のようにClipchamp APIの設定エリアで2つのドメインのホワイトリストが必要となります。:
第1ドメイン：Wixページの埋め込み用Clipchampボタンを表示するために使用しているURLをコピーし、Clipchamp APIの設定エリアからhttps://util.clipchamp.com/ja/api-setup/domainsで承認済みドメインのリストに追加します 。 これはブラウザのアドレスバーに表示される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チャンネルに配置されていて、その動画をあなたのウェブサイトに表示したい場合は、Wixのヘルプの次の手順を参照してYouTube動画を埋め込む方法をご覧ください。
まとめ
これらの作業はWixを使用している場合にビデオを収集するために全て必要なステップです。 また、ClipchampのビデオAPIアカウントに既に登録されている方のためにこの件に関するヘルプ記事を簡単にまとめましたのでご覧ください。
ホームページビルダーを使用していない場合は、 任意のウェブサイトに HTML5ビデオAPIを埋め込むためのインストール手順について説明している別のチュートリアルをご覧ください。
私たちは、幅広いシナリオを想定し、あらゆる種類のウェブプロジェクトに適した環境を生み出す為にクライアントと一緒にあらゆるものを構築してきました。 これには、たとえば、オンラインストアを運営している場合や、ブログの読者から動画によるコメントを受けとりたい場合など、顧客からビデオによる推奨の言葉を収集できる機能が含まれます。
最後にー私たちの提供する動画レコーダーウィジェットにはさまざまなカスタマイズオプションが用意されています。たとえば、自分のブランドを変更できたり、色やその他のスタイル要素を調整したり、入力動画およびや出力動画に関連するあらゆる設定を行うことができます。
この投稿では専門的な知識を必要とするオプションについて触れてきましたが、Wix動画レコーダーに追加するパラメータについて知りたい場合は、APIドキュメントの詳細をご覧になり熟読されることをお勧めいたします。 上記のステップ6でHTMLエディターに挿入したコードスニペットにオプションを追加するだけです。
