Brightcove Player によるサムネイルシーク

概要

動画のサムネイル画像を使用すると、ユーザーは進行バー上で関心のある位置を素早く確認できます。Brightcove Player は、ユーザーが進行バーにマウスオーバーするとサムネイル画像を表示します。進行バーをクリックすると、その位置から動画が再生されます。

画像はいつ生成されますか？

Brightcove は、リクエストに応じて画像を動的に生成します。Dynamic Delivery で取り込まれた動画は、最初のリクエスト時に画像が生成されます。これにより、使用されない動画に対して不要な画像が作成されることを防ぎます。生成された画像は、他の画像と同様に、ローカルおよび CDN にキャッシュされ、繰り返し表示に利用されます。

動画の画像生成頻度はどのくらいですか？

サムネイルの一覧は、初期化時のプレーヤーのピクセル幅に基づいてフィルタリングされます。この一覧は、プレーヤーのスタイル、ウィンドウ サイズ、プラットフォーム／デバイスなどによって大きく異なります。サムネイル プラグインでは、ユーザーが進行バー上を移動する際に、おおよそ 30px ごとに新しいサムネイルが表示されるように設計されています。たとえば、プレーヤーの幅が 1,500px の場合、約 50 枚のサムネイルに絞り込まれます。WebVTT キューの残りの時間間隔は、コンテンツの再生時間に応じて調整されます。

要件

サムネイル プラグインを使用するには、以下の要件を満たす必要があります。

• Brightcove Player バージョン 6.41.0 以降を使用する必要があります（最新版の 7 系リリースを推奨）
• 動画は Dynamic Delivery 用に取り込まれている必要があります
• サーバーサイド広告挿入（SSAI）を使用する場合は、videojs-ssai プラグイン バージョン 1.10.0 以降を使用する必要があります

プレーヤーの例

以下の例をクリックし、進行バー上を移動すると、プレビュー用のサムネイルが表示されます。

See the Pen Thumbnails plugin by Brightcove Learning Services (@bcls1969) on CodePen.

ソースコード

上記の CodePen で HTML ボタンを選択するとソースコードを確認できます。また、GitHub 上の完全なソリューション を参照することもできます。

はじめに

この機能は、Brightcove Video Cloud アカウントをお持ちのすべての方が利用できます。

動画が Dynamic Delivery 用に取り込まれていることを確認してください。

Studio を使用したサムネイルの実装

サムネイルシーク用にプレーヤーを設定する最も簡単な方法は、Video Cloud Studio を使用することです。

1. PLAYERS モジュールを開きます。既存のプレーヤーを使用するか、新しいプレーヤーを作成します。

2. プレーヤーのリンクを選択して、プレーヤーのプロパティを開きます。
3. 左側のナビゲーションで コントロール を選択します。

4. サムネイルのシーク にチェックを入れます。

   

5. プレーヤーを公開するには、公開と埋め込み > 変更の公開 を選択します。

   

6. これで、サムネイル プラグインがプレーヤーに設定されました。

   Dynamic Delivery 用に取り込まれた動画を使用し、上記の手順で設定したプレーヤーで公開してください。プレーヤーの進行バーにマウスオーバーすると、サムネイル画像が表示されるはずです。

WebVTT サムネイルの実装

独自のサムネイル画像を使用する場合は、カスタム WebVTT ファイルを作成し、player.addRemoteTextTrack() メソッドを使用してプレーヤーに渡すことができます。手順は以下のとおりです。

1. 標準の WebVTT 形式に従った .vtt ファイルを作成します。キャプション テキストの代わりに、各サムネイル画像の URL を指定します。次のような形式になります。

   

2. Video Cloud Studio で、Dynamic Delivery 用に取り込まれた動画を選択します。サムネイル プラグインが有効になっているプレーヤーの Videoタグ埋め込みコードをコピーします。
3. Web ページ用の HTML ファイルに、Videoタグ埋め込みコードを貼り付けます。
4. video タグに id 属性を追加します。
5. 閉じる body タグの直前に、script ブロックを追加します。

6. 作成した script ブロック内に、以下を追加します。

   プロパティ	値
   type	動画の MIME タイプ
   src	動画のソース URL

   コードは次のようになります。

   var player = bc('myPlayerID');
               
               player.ready(() => {
                 player.src({
                   type: 'video/mp4',
                   src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
                 });
               });

7. 同じ script ブロック内に、以下を追加します。

   プラグインが初期化され、プレーヤーの準備が完了した後、addRemoteTextTrack() メソッドを使用して、WebVTT ファイル内のサムネイル画像ソースをプラグインに渡します。このメソッドでサムネイル ファイルを指定する際には、以下の設定も行う必要があります。

   プロパティ	値
   src	サムネイル画像を含む WebVTT ファイルの場所
   kind	metadata に設定
   label	thumbnails に設定
   mode	hidden に設定
   addRemoteTextTrack() manualCleanup	ソース変更時にトラックが自動的に削除されるよう、false に設定します

   
   

   コードは次のようになります。

   var player = bc('myPlayerID');
               
                 player.ready(() => {
                   player.src({
                     type: 'video/mp4',
                     src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
                   });
               
                 player.addRemoteTextTrack({
                   src: 'thumbnails.vtt',
                   kind: 'metadata',
                   label: 'thumbnails',
                   mode: 'hidden'
                 }, false);
               });

ソースコード

詳細については、GitHub 上の完全なソリューション を参照してください。

変更履歴

v2.0.1 までの過去のリリースノートおよび変更履歴については、サムネイル プラグイン リリース を参照してください。

v2.0.1 以降に行われた主な変更については、Brightcove Player リリースノート に掲載されます。