Brightcoveプレーヤーでサムネイルを探す

概要

動画のサムネイル画像を使用すると、ユーザーは興味のあるセクションの進行状況バーをすばやくスキャンできます。Brightcove Player では、ユーザがプログレスバーにカーソルを置くと、サムネイル画像が表示されます。プログレスバーをクリックすると、ビデオ内のその場所に移動します。

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

Brightcoveは、要求に応じて画像を動的に生成します。Dynamic Deliveryで取り込んだ動画には、最初のリクエストで画像が生成されます。これにより、未使用のビデオの画像が作成されなくなります。生成されると、他の画像と同じように、画像はローカルおよびCDNにキャッシュされ、繰り返し表示されます。

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

サムネイルリストは、初期化時のプレーヤーのピクセル幅に基づいてフィルタリングされます。このリストは、プレイヤーのスタイリング、ウィンドウサイズ、プラットフォーム/デバイスなどによって大きく異なります。サムネイルプラグインは、ユーザーがプログレスバーの上に置くと、ほぼ30ピクセルごとに新しいサムネイルを表示することを目指しています。たとえば、プレーヤーの幅が 1,500 ピクセルである場合、プレーヤーはリストを絞り込み 50 個のサムネイルに絞り込みます。WebVTTキューの残りの時間間隔は、コンテンツの継続時間に応じて調整されます。

要件

サムネイルプラグインには、次の要件が適用されます。

Brightcove Playerのバージョン 6.41.0+ を使用する必要があります
動的配信には動画が取り込まれなければならない
この機能を使用するには、再生 API v2 を使用する必要があります
サーバーサイド広告挿入 (SSAI) の場合は、 videojs-ssai プラグインバージョン 1.10.0 以降を使用する必要があります。

プレーヤーの例

下の例をクリックし、プログレスバーにカーソルを置くと、プレビューサムネイルが表示されます。

ペンを見るサムネイルプラグイン Brightcove Learning Services（ @ bcls1969）オンCodePen。

ソースコード

上記の CodePen で HTML ボタンを選択してソースコードを表示するか、GitHub で完全なソリューションを表示できます。

はじめに

この機能は、Brightcove 動画クラウドアカウントをお持ちの方であれば誰でも利用できます。

動画が動的配信用に取り込まれていることを確認します。

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

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

プレイヤーモジュールを開きます。既存のプレーヤーを使用するか、新しいプレーヤーを作成します。
プレーヤーのリンクを選択して、プレイヤーのプロパティを開きます。
左側のナビゲーションで、[ コントロール] を選択します。
小切手サムネイル探し。

ブライトコーブのプラグイン
プレーヤーを公開するには、公開と埋め込み>変更の公開

変更の公開
これで、サムネイルプラグインがプレーヤー用に構成されました。

ダイナミック配信用に取り込んだ動画を使用し、上記の手順で設定したプレーヤーで公開します。プレーヤーのプログレスバーにカーソルを合わせると、サムネイル画像が表示されます。

WebVTT サムネイルの実装

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

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

WebVTT ファイル
Video Cloud Studio で、ダイナミック配信用に取り込んだビデオを選択します。バージョン 6.41.0+ のプレーヤーの [高度な埋め込みコード] をコピーします。
Web ページの HTML ファイルに、高度な埋め込みコードを貼り付けます。
HTML headコードのセクションに、サムネイル CSS ファイルを追加します。
```
//players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.css
```
HTML bodyコードのセクションに、サムネールの JavaScript ファイルを追加します。
```
//players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.js
```
videoidタグにプロパティを追加します。
body終了タグの前に、scriptブロックを追加します。

作成したスクリプトブロックに、以下を追加します。

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

あなたのコードは次のようなものでなければなりません。

var player = bc('myPlayerID');

player.thumbnails();

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

同じスクリプトブロックに、以下を追加します。

プラグインが初期化され、プレーヤーの準備ができたら、addRemoteTextTrack()メソッドを使用して WebVTT ファイルのプラグインにサムネイル画像ソースを渡します。サムネイルファイルを使用してメソッドを呼び出す場合は、以下も設定する必要があります。

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

あなたのコードは次のようなものでなければなりません。

var player = bc('myPlayerID');

player.thumbnails();

  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 の完全なソリューションを参照してください。

更新履歴

サムネールプラグインのリリースノートを参照してください。

過去のリリースノートについては、ここの changelog を参照してください。

ページコンテンツ

Brightcoveプレーヤーでサムネイルを探す

概要

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

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

要件

プレーヤーの例

ソースコード

はじめに

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

WebVTT サムネイルの実装

ソースコード

更新履歴