サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    サムネイルシーク Brightcove Player

    このトピックでは、サムネイルシークを実装する方法を学習します。 Brightcove Player.

    概要

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

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

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

    ビデオの画像周波数はどれくらいですか？

    画像は、コンテンツが5時間未満の場合は1秒ごとに生成され、コンテンツが10時間を超える場合は1秒ごとに生成されます。

    Requirements

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

    • あなたは Brightcove Player バージョン6.41.0 +
    • DynamicDeでは動画を取り込む必要がありますlivery
    • この機能を使用するには、 Playback API v2
    • サーバーサイド広告挿入（SSAI）の場合は、 videojs-ssai プラグインバージョン1.10.0以降

    Player 例

    以下の例をクリックし、進行状況バーに沿ってカーソルを合わせると、プレビューのサムネイルが表示されます。

    ペンを見る サムネイルプラグイン by Brightcove ラーニングサービス（@bcls1969）に コードペン.


    ソースコード

    ソースコードを表示するには、 HTML 上記のCodePenのボタン、またはあなたは GitHubの完全なソリューション.

    はじめに

    この機能は、 Brightcove Video Cloud アカウント。

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

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

    を設定する最も簡単な方法 player サムネイルシークは Video Cloud Studio.

    1. Video Cloud Studioで PLAYERS モジュール。 既存の player または新しいものを作成します。

    2. 現在地に最も近い player 開くためのリンク playerのプロパティ。
    3. 左側のナビゲーションで、 プラグイン.

    4. 拡大する プラグインを追加する ドロップダウンメニューを選択し、 Brightcove プラグイン.

      Brightcove プラグイン
      Brightcove プラグイン

    5. 拡大する Brightcove プラグイン ドロップダウンメニューを選択し、 サムネイル.

      サムネイルプラグイン
      サムネイルプラグイン

    6. 現在地に最も近い セットで€６ ボタン。 これで、プラグインが player.

      サムネイルプラグインが追加されました
      サムネイルプラグインが追加されました

    7. 公開するには player選択 パブリッシュと埋め込み>変更の公開をクリックします。

      変更を公開する
      変更を公開する

    8. これでサムネイルプラグインが設定されました player.

      DynamicDe用に取り込んだビデオを使用するliveryして、 player 上記の手順で構成しました。 にカーソルを合わせるとサムネイル画像が表示されます playerの進行状況バー。

    WebVTTサムネイルの実装

    独自のサムネイル画像を使用する場合は、カスタムWebVTTファイルを作成して、 player player.addRemoteTextTrack() 方法。 手順は次のとおりです。

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

      WebVTTファイル
      WebVTTファイル
    2. In Video Cloud Studio、DynamicDe用に取り込まれたビデオを選択しますlivery。 の高度な埋め込みコードをコピーします player バージョン6.41.0以降。
    3. WebページのHTMLファイルに、高度な埋め込みコードを貼り付けます。
    4. の中に head HTMLコードのセクションにサムネイルCSSファイルを追加します。 
      //players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.css
    5. の中に body HTMLコードのセクションに、サムネイルJavaScriptファイルを追加します。 
      //players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.js
    6. 〜に video タグを追加し、 id プロパティ。
    7. 閉店前 body タグ、追加 script ブロック。

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

      プロパティ 値
      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'
  });
});

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

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

      プロパティ 値
      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の完全なソリューション.

    制限事項

    以下は、サムネイルプラグインに関連する制限です。

    • このプラグインの現在のバージョンは、モバイルデバイスのサムネイルをサポートしていません。

    変更履歴

    見ます 変更履歴はこちら.

    最終更新日：08年2021月XNUMX日