Facebook 内で再生するためにブライトコーブでホストしないよう動画を設定する

Product
Video Cloud
対象となる役割
パブリッシャ
バージョン
Brightcove 5
エディション
Pro, Enterprise
作成者 Jessica Nutting.

この記事では、共有動画が Facebook インターフェース内部に埋め込まれ再生されるように、ブライトコーブ上でホストしない Video Cloud 動画、つまり URL が http://bcove.me/ でない動画のバイラル共有を設定する方法を詳述します。

ブライトコーブ URL で動画をホストせずに、共有者の Facebook ウォールで共有動画を表示したい場合、共有動画が Facebook ウォールで再生されるように、動画プロパティに特定の Facebook Open Graph <meta> タグを追加する必要があります。

動画へのリンクの埋め込みと動画の埋め込み

ブライトコーブでホストされない動画を共有する場合、Facebook ユーザーは、Facebook に埋め込まれず別のブラウザ ウィンドウで再生される動画へのリンクを共有できます。また、ブライトコーブによってホストされない動画に Open Graph タグを設定すると、ちょうど共有された YouTube 動画を見るように、友達は、Facebook 内部から Video Cloud 動画を視聴できます。

動画へのリンクの埋め込み

ブライトコーブ上でホストしない動画へのリンクを共有したい場合には、お客様のソリューションに特殊な Facebook Open Graph タグを追加する必要はありません。デフォルトでは、視聴者が、Video Cloud プレーヤの共有コントロールをクリックして動画を共有し、プレーヤのバイラル共有メニューから Facebook ボタンをクリックすると、視聴者は、その動画だけが含まれる新しいブラウザ ウィンドウで、または動画の共有元である Web サイトで動画を視聴できます。

動画の埋め込み

ブライトコーブで動画をホストせず、動画を Facebook に埋め込まれた状態で再生したい場合には、特殊な Facebook Open Graph タグをソリューションに追加する必要があります。つまり、URL が HTTP://bcove.me/ でない動画を、Video Cloud プレーヤの共有コントロールをクリックして共有し、プレーヤのバイラル共有メニューの Facebook ボタンをクリックしてFacebook インターフェース内部で再生するには、Facebook Open Graph タグが必要です。

動画へのリンクの埋め込み

動画の埋め込み

上の例で、左の画像は、Open Graph タグをソリューションに追加せずに、ブライトコーブによってホストされていない動画を共有した場合を示しています。ここで、Facebook ウォールの埋め込みリンク サムネイルをクリックすると、動画は、ブラウザ ウィンドウで再生されます。右の画像は、埋め込み再生を示します（動画サムネイル上の再生ボタン オーバーレイに注意してください）。Facebook のウォールから埋め込まれた動画をクリックすると、Facebook のインターフェースで動画が再生されます。

専用バイラル プレーヤの設定、再生場所、サムネイル画像の追加など、Facebook 向けのバイラル共有設定の概要は、「Facebook で動画を共有する」を参照してください。この記事では、ブライトコーブ URL で動画をホストしていることを確認する方法も説明します。

Facebook Open Graph タグを使用して、動画を Facebook ウォールで再生する

ブライトコーブ URL で動画をホストせずに、YouTube 動画のように共有動画を Facebook インターフェースに埋め込まれた状態で再生したい場合には、共有したい動画をホストするページの <head> セクションに Facebook Open Graph <meta> タグを追加する必要があります。

重要：この方法による Facebook のウォール上での動画再生は、単一の動画の共有のみをサポートします。Facebook UI で再生する複数動画の共有に関する推奨事項については、「Facebook のウォールで再生する動画をプレイリストから共有する」を参照してください。

Facebook のウォールでの動画の埋め込み再生を設定するには、次の手順を行います。

  1. [グローバル] 設定の [ホスト オプション] で [お客様の URL でホスト] を選択し、共有動画を表示するプレーヤを含むページのアドレスを入力します。
  2. 共有する動画を含むプレーヤをホストするページのソース <head> に、必要な Facebook Open Graph メタ タグを追加します。これらのタグによって Facebook は、Facebook UI 内で Video Cloud 動画を再生できます。

動画に追加する Open Graph メタ タグのサンプルを挙げます。太字の部分をお客様の動画や画像のデータに置き換えてください。

  <meta property="og:title" content="Add-Video-Title"/>
  <meta property="og:description" content="%VIDEO_SHORT_DESCRIPTION%" />
  <meta property="og:type" content="movie/>
  <meta property="og:video:height" content="350"/>
  <meta property="og:video:width" content="350"/>
  <meta property="og:url"  content="Add-Video-URL"/>
  <meta property="og:video:secure_url" conntent="Add-Secure-Video-URL">
  <meta property="og:image" content="Add-Thumbnail-URL"/>
  <meta property="og:description" content="Add-Video-Description"/>

コードの注意点は以下の通りです。

  • 動画にサポートされる Type は movie です。
  • 上のサンプルでは、og:title プロパティおよび og:description プロパティが、ウォールに表示される動画のタイトルと説明を指定します。ここで入力した内容は、Video Cloud Media モジュールで動画に割り当てられたり、Media API を使用して動的に追加されたりしたタイトル フィールドまたは説明フィールドよりも優先されます。
  • og:width および og:height プロパティは、Facebook UI で再生される動画のサイズを指定します。
  • og:video プロパティは、動画の URL を指定します。og:video:secure_url は、安全な閲覧を要求するようセキュリティ設定を行った Facebook ユーザーに必要な、安全な URL を指定します。これらの URL 値の設定の詳細については、「バイラル プレーヤをホストするページの URL を取得する」を参照してください。
  • og:image プロパティは動画サムネイルを指定します。「動画サムネイル URL を取得する」を参照してください。

Facebook は、しばしばそのプロトコルと標準を変更します。Facebook Open Graph プロトコルへの最新の変更および追加を確認するには、Facebook 開発者サイト（http://developers.facebook.com/docs/opengraph/）で、Open Graph プロトコルを使用した音声と動画のデータの添付に関する情報を探してください。また、メタ タグが適切であることを確認するために、Facebook では、共有したときに URL が Facebook のウォールでどう見えるかのプレビューを表示する URL リンター ツールを提供しています。また、リンター ツールは、共有後に同じ URL に変更を加え続けた場合、お客様のサイトの現在の Facebook キャッシュをクリアします。リンター ツールは http://developers.facebook.com/tools/lint/ にあります。

バイラル プレーヤをホストするページの URL を取得する

ページの URL を取得するには URL 文字列を作成します。それには、下の例の太字で示した各プレースホルダをお客様のパブリッシャ ID、プレーヤ ID、および動画 ID で置き換えます。

"http://c.brightcove.co.jp/services/viewer/federated_f9?isVid=1&isUI=1&publisherID=Add-Publisher-ID&playerID=Add-Player-ID&domain=embed&videoId=Add-Video-ID"

動画とプレーヤの URL を取得するには、ご利用の開発環境によっては、プレーヤの共有メニューで [リンクのコピー] をクリックし、ブラウザに URL をコピーして、そのプレーヤの動画 URL として URL をエンコードする、というより簡単な方法を使用できます。

動画 URL および安全な動画 URL を取得する

動画の URL を取得するには URL 文字列を作成します。それには、下の例の太字で示した各プレースホルダを、お客様のパブリッシャ ID、暗号化されたプレーヤ キー、および共有動画の動画 ID で置き換えます。

"http://c.brightcove.co.jp/services/viewer/federated_f9/Add-Publisher-ID?isVid=1&isUI=1&playerKey=Add-Player-KEY&videoId=Add-Video-ID"

Facebook では、メンバーが安全なブラウザを常に使用するよう推奨しています。ここで動画 URL タグを追加せず、また https 接続による安全な URL を参照しない場合、お客様の動画は、Facebook ウォールに埋め込まれずに、ブラウザで単独の動画として再生されるか、あるいはまったく再生されない可能性があります。下のサンプルの太字で示した各プレースホルダを、お客様のパブリッシャ ID、暗号化されたプレーヤ キー、および動画 ID と置換して、URL 文字列を構築してください。文字列は、安全なブラウザ URL であり、secureConnections=true パラメータが含まれることに注意してください。

"https://secure.brightcove.co.jp/services/viewer/federated_f9/Add-Publisher-ID?isVid=1&isUI=1&playerKey=Add-Player-KEY&videoId=Add-Video-ID"&secureConnections=true"

動画サムネイル URL を取得する

お客様が Video Cloud Pro または Enterprise をご利用の場合

サムネイルの URL を取得するには、以下の手順に従って find_video_by_id メソッドを使用し Media API 呼び出しを行います。

  1. ブラウザ ウィンドウでは、太字で示されたコードの最初と 2 番目のチャンクにお客様の動画 ID とアカウントの Media API 読み取りトークンを使用して、以下の文字列を入力します。
http://api.brightcove.co.jp/services/library?command=find_video_by_id&video_id=441732028001
&video_fields=thumbnailURL&token=lksajf4ou54ewqsakjger..
  1. Media モジュールで動画を選択し、右側のプロパティ ペインから ID をコピーすることによって、動画 ID をコピーします。
  2. Video Cloud Studio の [アカウント設定] の [API 管理] セクションから Media API 読み込みトークンをコピーします。トークンのコピーに関する詳細は、「Media API トークンの管理」を参照してください。

API 呼び出しによって、サムネイル URL の値を含む JSON 文字列が返されます。バックスラッシュを削除すると、サムネイル URL アドレスになります。

Media API を使用した呼び出しに関する詳細は、「Media API の基礎」を参照してください。また、API 呼び出しの生成については http://opensource.brightcove.com/api/ にて Video Cloud API テスト ツールを確認してください。

お客様が Video Cloud Express をご利用の場合は次の手順を行います。

JavaScript を使用した単純な HTML ページを作成して、次のようなサムネイル URL を含む文字列を返すことができます。サムネイル取得サンプル ページは、http://files.brightcove.com/GetThumbnailURLs.html です。

  1. 動画の Web サイト パブリッシング コードをコピーします。それには、Video Cloud Studio の Media モジュールから動画を選択し、左のパネルから [クイック動画公開] をクリックします。
  2. サムネイルの取得サンプルからソース コードを取得し、プレーヤ コードをサンプル プレーヤ コードに置換します。
  3. ページを Web サーバーで公開します。
  4. サムネイル URL は、.jpg または .png 拡張子の左の文字列です。

お客様によってホストされた動画をプレイリストから共有する

お客様独自の URL でホストされ、Facebook ウォールに埋め込まれて再生される動画には、共有する各動画の動画 ID を実行時に参照するメタ タグが必要です。したがって、プレイリストから複数の動画を共有する場合には、各動画に専用ページを作成する戦略が必要になります。ブライトコーブは、あるプレーヤの各プレイリストの各動画に専用 URL を構築する、ソーシャル ネットワーキング最適化（SNO）プランの採用を推奨します。ソーシャル メディア最適化ソリューションを作成するのに役立つリソースについては、アカウント マネージャにお問い合わせください。