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

概要

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

必要なもの

このポータルを構築するために必要なものは次のとおりです。

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

設計上の考慮事項

ビデオデータの取得

のいずれか CMS API または Playback API ビデオデータをフェッチするために使用できます。 Playback API いくつかの理由から、ここでは明らかな選択です。

• 応答データがキャッシュされるため（最大20分間）、はるかに高速です。
• ビデオの再生に必要なすべてのデータを返しますが、 CMS API 動画メタデータと動画ソースを取得するには、XNUMXつの個別のリクエストが必要です
• CORS対応であり、サーバー側のプロキシアプリを介してAPIリクエストをルーティングする必要がない

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

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

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

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

player

特別な要件はありません player - デフォルト Brightcove Player うまくいきます。

一部のユーザーは動画をまったく視聴しない可能性があるため、帯域幅を使用して player それが必要になるまで。 私たちは Brightcove Player ローダー ロードする player ビデオが初めて再生用に選択されたときに動的に。 パフォーマンスを最大化するために、 Brightcove Player JavaScript、しかし player ローダーがまだ存在しない場合は、これが自動的に行われます。

ポリシーキーの取得

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

サンプルアプリケーション

このアプリのコード

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

コデペン

ペンを見る ビデオグリッドのサンプル ブライトコーブラーニングサービス（@rcrooks1969） オン コードペン.