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

    Brightcove Player ローダー

    このトピックでは、 Brightcove Player ローダーをロードする Brightcove Player 最新のビルドツールを使用しています。 このライブラリは、より技術的な顧客のためのツールと見なされます。

    Player ローダーの概要

    ユーザーの場合 Brightcove Player ページはめ込みとiframeのどちらもコピーして貼り付けたくない player 実装では、このモジュールはWebアプリケーションにバンドルされており、使用する方法を提供します Brightcove Playersダウンロードのために統合コードを記述する必要がない playersおよびそれらを埋め込みます。 このツールは、 Brightcove 公開されたものをダウンロードできるライブラリ Brightcove Player それをDOMに埋め込みます。

    このライブラリは常緑色のブラウザ、Chrome、Firefox、Edge、Safari、IE11をサポートしています。 以前のバージョンのIEはサポートされていません。

    このドキュメントでは基本的に、 Brightcove Player ローダ。 詳細については、図書館の ブライトコーブ/ player-ローダ GitHubレポ。

    利用できるウェブパックがあります Brightcove Player。 その詳細は、 player-loader-webpack-plugin GitHubレポ。

    インストール

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

    npm install --save @brightcove/player-loader

    図書館を含む

    ライブラリを使用するさまざまな方法については、 GitHubレポ ライブラリのために。

    約束を使用した実装

    あなたが使用することができます JavaScript Promise ライブラリと一緒に。 このライブラリが動作するために約束は必要ありませんが、推奨されています。 デフォルトでは、このライブラリはグローバルなPromiseを探します。 ただし、明示的にPromise実装を提供するには、 Promise パラメータについては、このドキュメントの後半で詳しく説明します。

    以下は、Promiseを使用したライブラリの実装を示しています。 重要な概念は、 player 使用して、 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>

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

    また、 player 経由でコールバックを使用するローダー onSuccessonFailure コールバック関数。

    以下は、コールバックを使用したライブラリの実装を示しています。 重要な概念は、 player 使用して、 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

    データ・タイプ: 文字列| 数

    説明:
    A Video Cloud アカウントID。

    お名前: applicationId

    データ・タイプ: 文字列

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

    お名前: catalogSearch

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

    説明:
    A Video Cloud 実行するカタログ検索。 これは、単純な文字列検索または カタログ getSearch() 方法。 JSONとしてシリアライズ可能でない文字列以外の値が指定された場合、このパラメータは無視されます。

    お名前: catalogSequence

    データ・タイプ: 配列| オブジェクト


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

    お名前: embedId

    データ・タイプ:文字列

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

    お名前: embedOptions

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

    説明:
    埋め込み生成のための特定のオプションを提供するために使用されます。 これらには、

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

    データ・タイプ: 文字列

    説明:
    生成する埋め込みコードの種類。 このパラメータの値は、次のいずれかでなければなりません。

    • 'in-page' or brightcovePlayerLoader.EMBED_TYPE_IN_PAGE:高度な埋め込みコードとも呼ばれ、これは player トップレベルのWebページに直接アクセスします。
    • 'iframe' or brightcovePlayerLoader.EMBED_TYPE_IFRAME:基本的な埋め込みコードとも呼ばれ、これは player <iframe>要素として。
    デフォルト値は 'in-page'.
    お名前: onEmbedCreated

    データ・タイプ: 関数(要素)

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

    お名前: onFailure

    データ・タイプ: 機能(エラー)

    説明:
    コールバック関数は、 Promise 利用できないか、または望ましくない。 この関数を渡すと、 Promise 返されることから それは単一の Error 引数としてのオブジェクト。 この関数の戻り値は無視されます。

    お名前: onSuccess

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

    説明:
    成功時のハンドリングを可能にするコールバック関数 Promise 利用できないか、または望ましくない。 この関数を渡すと、 Promise 返されることから それは単一の Success 引数としてのオブジェクト。 この関数の戻り値は無視されます。

    お名前: options

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

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

    お名前: playerId

    データ・タイプ: 文字列

    説明:
    A Brightcove Player player ID。 デフォルトは 'default'.

    お名前: playlistId

    データ・タイプ: 文字列| 数

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

    お名前: playlistVideoId

    データ・タイプ: 文字列| 数

    説明:

    A Video Cloud によって指定された結果のプレイリストに含まれるビデオID playlistId。 このパラメータは、 playlistId 欠落しています。

    お名前: Promise

    データ・タイプ: 機能(機能)

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

    お名前: refNode

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

    説明:
    必須
    DOM要素 player 埋め込まれます。 DOM要素として提供されない場合は、文字列として提供され、次のように渡されます。 document.querySelector.

    お名前: refNodeInsert

    データ・タイプ: 文字列

    説明:
    の方法 player 参照DOM要素(refNodeで指定)を基準にして挿入されます。 このパラメーターの値は、次のいずれかでなければなりません。

    • 'append' or brightcovePlayerLoader.REF_NODE_INSERT_APPEND: player 参照ノードの最後の子になります。
    • 'prepend' or brightcovePlayerLoader.REF_NODE_INSERT_PREPEND: player 参照ノードの最初の子になります。
    • 'before' or brightcovePlayerLoader.REF_NODE_INSERT_BEFORE: player 参照ノードの前の兄弟になります。
    • 'after' or brightcovePlayerLoader.REF_NODE_INSERT_AFTER: player 参照ノードの次の兄弟になります。
    • 'replace' or brightcovePlayerLoader.REF_NODE_INSERT_REPLACE:参照ノードは削除され、 player.

    お名前: videoId

    データ・タイプ: 文字列| 数

    説明:
    A Video Cloud ビデオIDまたはビデオ参照ID。


    ページの最終更新日:28年2020月XNUMX日