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

Facebook インスタント記事は、Facebook ニュースフィードで記事を高速かつインタラクティブに読むための体験を提供します。インスタント記事は、コンテンツ管理システムから直接（Instant Article 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>