ビデオサムネイルグリッド

概要

一方Brightcoveギャラリービデオポータルを構築するための堅牢なシステムを提供します。また、簡単な日曜大工のポータルを構築することもできます。ユーザーが動画を選択する前に Web ページにプレーヤーをロードしたくない場合は、このサンプルに示すように、ビデオのサムネイルグリッドを表示できます。サムネイルを選択すると、選択した動画を含むページに Brightcove Player が読み込まれます。

必要事項

このポータルの構築に必要なのは、次のとおりです。

• Video Cloudアカウント
• Playback API へのリクエストを認証するための検索対応のポリシーキー
• ウェブ開発スキル（HTML、CSS、JavaScript）

設計上の考慮事項

ビデオデータの取得

どちらかがCMS APIまたは、Playback APIを使用してビデオデータをフェッチすることができます。PlaybackAPIは、いくつかの理由から、ここでは当然の選択です。

• 応答データは (最大 20 分) キャッシュされるため、はるかに高速です
• ビデオを再生するために必要なすべてのデータを返しますが、 CMS APIビデオメタデータとビデオソースを取得するには、2つの別々のリクエストが必要です
• これは CORS が有効です。つまり、API リクエストをサーバー側のプロキシアプリ経由でルーティングする必要はありません

ただし、Playback API では、ビデオデータをフェッチする 2 つの方法が用意されています。ID（または参照ID）でビデオを取得する基本的な方法があり、IDの配列を繰り返してそれぞれを要求することができます。しかし、それはあまり効率的ではありません。

より良いオプションは、私たちはIDですべての動画を検索し、1つのリクエストでそれらを返すことができるビデオ検索メソッドを使用することです。リクエストの検索パラメータは次のようになります。

q=id:6543217890%20id:1234567890%20id:987654321...

ザ・%20この検索文字列には、URIエンコードされたスペースがあります。検索構文の詳細については、を参照してください。 CMS /Playback API：ビデオ検索。

プレイヤーは

プレーヤーには特別な要件はありません。デフォルトの Brightcove Player で正常に動作します。

一部のユーザーはビデオをまったく見ない可能性があるため、必要なまで帯域幅を使用してプレーヤーをロードする必要はありません。を使用しますBrightcoveプレーヤーローダー初めてビデオを再生するように選択したときに、プレーヤーを動的にロードします。パフォーマンスを最大化するために、Brightcoveプレーヤーの JavaScript もプリロードしますが、まだ存在していない場合は、プレーヤーローダーが自動的に行います。

ポリシーキーの取得

ポリシーキーは、すべての Brightcove プレーヤーに対して自動的に生成されます。ただし、セキュリティ上の理由から、標準のポリシーキーでは、Playback API を使用した動画の検索は有効化されません。このサンプルでは、検索が有効なキーが必要です。を使用して作成できますPolicy API、しかし最も簡単な方法は、Brightcove学習サンプルアプリ検索が有効なキーを取得するオプションを必ずチェックしてください。

サンプルアプリ

このアプリのコード

このアプリのコードは次の場所にあります。このGitHubリポジトリ。

コーデペン

ペンを見るビデオグリッドサンプル Brightcove Learning Services（ @ rcrooks1969） オンCodePen。