Facebook インスタント記事で Brightcove プレーヤーを公開する

Facebookインスタント記事は、Facebook のニュースフィード内で記事を高速かつインタラクティブに閲覧できる仕組みです。インスタント記事は、コンテンツ管理システムから直接（Instant Articles APIを使用）公開するか、RSSフィードを提供することで公開できます。インスタント記事は、通常のモバイルウェブ記事よりも最大10倍高速で表示されます。友達やフォローしているページがニュースフィードでリンクを共有すると、Facebook はその URL に対応するインスタント記事があるかを確認し、あればインスタント記事として表示し、なければ通常のウェブブラウザで開かれます。

インスタント記事に埋め込まれた Brightcove プレーヤーは、以下の機能を引き続きサポートします:

• プリロールおよびミッドロール広告
• Brightcove のアナリティクス
• サードパーティー製プラグイン

なお、アナリティクスは　Brightcoveによって収集されますが、アナリティクスに記録される表示ドメインはfacebook.com ではなく brightcove.com となります。

インスタント記事ではさまざまなタイプのコンテンツを共有できますが、このトピックでは、インスタント記事のページ内で Brightcove プレーヤーを共有する方法に焦点を当てています。インスタント記事の詳細については、Facebook の公式ドキュメントをご覧ください。

プレーヤー埋め込みコードの生成

インスタント記事で使用するためにプレーヤーのプロパティを変更する必要はありません。以下の手順に従って、インスタント記事用のプレーヤー埋め込みコードを生成してください：

1. Video Cloud Studio から通常の iframe 埋め込みコードを取得し、それを HTML5 の<figure>要素内に配置します。

     <figure>
     <iframe src="//players.brightcove.net/1486906377/V1ziujO35l_default/index.html?videoId=3766858011001"
      allowfullscreen webkitallowfullscreen mozallowfullscreen width="640" height="360"></iframe>
     </figure>
           

2. figure タグに op-interactive クラスを追加します。

     <figure class="op-interactive">
     <iframe src="//players.brightcove.net/1486906377/V1ziujO35l_default/index.html?videoId=3766858011001"
      allowfullscreen webkitallowfullscreen mozallowfullscreen width="640" height="360"></iframe>
     </figure>
           

3. iframeにwidth と height を指定します。width と height はプレーヤーの絶対サイズではなくアスペクト比を設定するためのものです。最終的なコードは以下のようになります：

     <figure class="op-interactive">
     <iframe src="//players.brightcove.net/1486906377/V1ziujO35l_default/index.html?videoId=3766858011001"
      allowfullscreen webkitallowfullscreen mozallowfullscreen width="16" height="9"></iframe>
     </figure>