サポートに連絡する| システムステータス
ページコンテンツ

    Brightcoveのプレーヤーローダー

    In this topic, you will learn how to use the Brightcove Player Loader to load a Brightcove Player using modern build tooling. This library is seen as a tool for more technical customers.

    プレーヤーローダーの概要

    Brightcove Playerのユーザーが、ページ内埋め込みまたはiframeプレーヤーの実装をコピーして貼り付けたくない場合、このモジュールはWebアプリケーションにバンドルされており、ダウンロードするための統合コードを記述せずにBrightcovePlayerを使用する方法を提供します。プレーヤーとそれらを埋め込みます。このツールは、公開されているBrightcoveプレーヤーをダウンロードしてDOMに埋め込むことができるBrightcoveライブラリの問題を解決します。

    このライブラリは、一般的な常緑のブラウザ、Chrome、Firefox、Edge、およびSafariをサポートしています。

    このドキュメントは基本的に、Brightcove PlayerLoaderの使用例を示しています。詳細については、ライブラリの brightcove/プレーヤーローダー GitHub レポを参照してください。

    Brightcove Playerで利用できる Web パックがあります。その詳細については、プレーヤーローダー Webpack-Plugin GitHub リポジトリにあります。

    インストール

    ライブラリは、次を使用して NPM を使用してインストールされます。

    npm install --save @brightcove/player-loader

    ライブラリを含む

    あなたの使用のためのライブラリを含めるさまざまな方法については、ライブラリの GitHub リポジトリを参照してください。

    Promiseを使用した実装

    あなたは使用することができますJavaScript Promiseライブラリで。このライブラリが機能するために約束は必要ありませんが、推奨されます。デフォルトでは、このライブラリはグローバル Promise を探します。ただし、Promiseこのパラメータを使用して Promise 実装を明示的に提供できます。詳細については、このマニュアルで後述します。

    以下は、Promiseを使用したライブラリの実装を示しています。重要な概念は、var myPlayer = success.ref;then約束を処理するセクションでを使用して、プレイヤーへの参照を取得することです。

    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <style>
        .video-js {
          height: 344px;
          width: 610px;
        }
      </style>
    
    </head>
    
    <body>
      <script src="brightcove-player-loader.min.js"></script>
    
      <div id="theDiv">
      </div>
    
      <script>
        brightcovePlayerLoader({
          refNode: document.querySelector('#theDiv'),
          accountId: '1752604059001',
          playerId: 'wHBRh9M3o',
          videoId: '4607357817001'
        })
        .then(function(success) {
          var myPlayer = success.ref;
          console.log('success', success);
          myPlayer.on('loadedmetadata',function(){
            myPlayer.muted(true);
            myPlayer.play();
          });
        })
        .catch(function(error) {
          console.log('error', error);
        })
      </script>
    
    </body>
    
    </html>

    コールバックを使用した実装

    コールバックを使用してプレーヤーローダーを実装するには、onSuccessonFailureおよびコールバック関数を使用します。

    コールバックを使用したライブラリの実装を次に示します。重要な概念は、var myPlayer = success.ref;onSuccessコールバック関数でを使用して、プレーヤーへの参照を取得することです。

    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <style>
        .video-js {
          height: 344px;
          width: 610px;
        }
      </style>
    
    </head>
    
    <body>
      <script src="brightcove-player-loader.min.js"></script>
    
      <div id="theDiv">
      </div>
    
      <script>
      brightcovePlayerLoader({
        refNode: document.querySelector('#theDiv'),
        accountId: '1752604059001',
        playerId: 'wHBRh9M3o',
        videoId: '4607357817001',
        onSuccess: function(success) {
          var myPlayer = success.ref;
          console.log('success', success);
          myPlayer.on('loadedmetadata',function(){
            myPlayer.muted(true);
            myPlayer.play();
          });
        },
        onFailure(error) {
          console.log('error', error);
        }
      });
      </script>
    
    </body>
    
    </html>

    使用可能なパラメータ

    名前:accountId

    データ型:文字列 | 数値

    説明:
    ビデオクラウドアカウントID。

    名前:applicationId

    データ型:文字列

    説明:
    生成された埋め込みに適用されるアプリケーション ID。

    名前:catalogSearch

    データ型:文字列 | オブジェクト

    説明:
    実行するビデオクラウドカタログ検索。これは、単純な文字列検索または一致するオブジェクトにすることができますカタログgetSearch()方法。JSON としてシリアライズできない文字列以外の値が指定された場合、このパラメータは無視されます。

    名前:catalogSequence

    データ型:アレイ|オブジェクト


    説明:
    実行するビデオクラウドカタログシーケンス。を参照してくださいカタログgetLazySequence()方法詳細については。JSON としてシリアライズできない文字列以外の値が指定された場合、このパラメータは無視されます。

    名前:embedId

    データ・タイプ:ストリング

    説明:
    Brightcove Playerは、プレーヤーのIDを埋め込みます。デフォルト値はです'default'。デフォルト値は、ほとんどのユーザーにとって正しいです。

    名前:embedOptions

    データタイプ: オブジェクト

    説明:
    埋め込み生成の特定のオプションを提供するために使用されます。たとえば、次のような事項が挙げられます。

    embedOptions.pip ブール値 場合はtrue<div class="vjs-pip-container">要素に埋め込みをラップします。これは、 Brightcove Picture-in-Picture プラグインのサポートが必要な場合に使用します。デフォルト値はですfalse
    embedOptions.playlist ブール値 場合はtrue<div class="vjs-playlist">埋め込みの後に要素を追加します。これは、ブライトコーブプレイリスト UI プラグインのサポートが必要な場合に使用します。デフォルト値はですfalse
    embedOptions.responsive ブール値|オブジェクト 埋め込みコードをカスタマイズして、固有比ラッパーアプローチ。trueの場合、コンテナを満たす16:9のアスペクト比のレスポンシブ埋め込みコードを生成します。デフォルト値はですfalse
    次のサブプロパティを使用して、これをカスタマイズするためのオブジェクトを提供できます。
    • aspectRatio:アスペクト比を 16:9 以外の値にカスタマイズするために使用される文字列 (例:'4:3')。
    • maxWidth :プレーヤーの最大幅を抑制するために使用される文字列。これは、ピクセルなどの CSS 単位を使用する必要があります (例:'960px')。
    embedOptions.unminified ブール値 場合true、プレーヤーの縮小されていないバージョンを使用します。これはデバッグの目的に役立ちますが、より大きなプレーヤーのダウンロードにかかる費用がかかります。生産にはお勧めしません! デフォルト値はですfalse
    名前:embedType

    データ型:文字列

    説明:
    生成する埋め込みコードタイプ。このパラメータの値は、次のいずれかである必要があります。

    • 'in-page'またはbrightcovePlayerLoader.EMBED_TYPE_IN_PAGE :高度な埋め込みコードとも呼ばれ、プレーヤーをトップレベルの Web ページに直接挿入します。
    • 'iframe'またはbrightcovePlayerLoader.EMBED_TYPE_IFRAME :基本埋め込みコードとも呼ばれ、プレーヤーを <iframe> 要素として挿入します。
    デフォルト値はです'in-page'
    名前:onEmbedCreated

    データタイプ: 機能(要素)

    説明:
    埋め込み要素をカスタマイズするために使用されるコールバック(いずれかvideo-js要素またはiframe要素)DOMに挿入される前、または結果としてカスタマイズされる前embedOptionsプレーヤーがダウンロードされて初期化される前。embed要素は変更される可能性があります。または、このコールバックが要素を返す場合、その要素がembed要素として使用されます。潜在的なユースケースは、属性の追加/削除、またはソースやトラックなどの子要素の追加です。

    名前:onFailure

    データタイプ: 関数(エラー)

    説明:
    障害の処理を可能にするコールバック関数Promise利用できないか、望ましくありません。この関数を渡すと、Promiseが返されなくなります。これは、Error引数として単一のオブジェクトを取得します。この関数の戻り値は無視されます。

    名前:onSuccess

    データタイプ: 関数(オブジェクト)

    説明:
    成功の処理を可能にするコールバック関数Promise利用できないか、望ましくありません。この関数を渡すと、Promiseが返されなくなります。これは、Success引数として単一のオブジェクトを取得します。この関数の戻り値は無視されます。

    名前:options

    データタイプ: オブジェクト

    説明:
    Video.js オプションオブジェクトプレーヤーの作成プロセス中に通過します。これらのオプションは、BrightcovePlayer構成で指定された設定よりも優先されます。このパラメータは、iframe 埋め込みでは使用できません。

    名前:playerId

    データ型:文字列

    説明:
    Brightcove PlayerプレーヤーID。デフォルトは'default'

    名前:playlistId

    データ型:文字列 | 数値

    説明:
    Video Cloud プレイリスト ID または再生リストの参照 ID。

    名前:playlistVideoId

    データ型:文字列 | 数値

    説明:

    で指定された結果の再生リストにある Video Cloud ビデオ ID playlistId。が欠落している場合playlistId、このパラメータは無視されます。

    名前:Promise

    データタイプ: 関数(関数)

    説明:
    明示的に提供するために使用されますPromise実装。提供されている場合、これはグローバルの代わりに使用されますPromise。デフォルトはwindow.Promise

    名前:refNode

    データタイプ: 要素 | 文字列

    説明:
    必須
    プレーヤーが埋め込まれるDOM要素。DOM要素として提供されていない場合は、文字列として提供できます。この文字列はに渡されます。document.querySelector

    名前:refNodeInsert

    データ型:文字列

    説明:
    参照DOM要素(refNodeで指定)を基準にしてプレーヤーが挿入される方法。このパラメータの値は、次のいずれかである必要があります。

    • 'append'またはbrightcovePlayerLoader.REF_NODE_INSERT_APPEND :プレイヤーは、リファレンスノードの最後の子になります。
    • 'prepend'またはbrightcovePlayerLoader.REF_NODE_INSERT_PREPEND :プレイヤーは、リファレンスノードの最初の子になります。
    • 'before'またはbrightcovePlayerLoader.REF_NODE_INSERT_BEFORE :プレイヤーは、リファレンスノードの前の兄弟になります。
    • 'after'またはbrightcovePlayerLoader.REF_NODE_INSERT_AFTER :プレイヤーは、リファレンスノードの後の次の兄弟になります。
    • 'replace'またはbrightcovePlayerLoader.REF_NODE_INSERT_REPLACE :リファレンスノードが削除され、プレーヤーによって置き換えられます。

    名前:videoId

    データ型:文字列 | 数値

    説明:
    VideoCloudビデオIDまたはビデオ参照ID。


    ページの最終更新日30 Sep 2021