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

    Brightcove Player サンプル: Live カスタムエラーメッセージ

    このトピックでは、ユーザーが使用できないライブビデオストリームを再生しようとしたときにカスタムオーバーレイ画像を表示する方法を学習します。

    Player 例

    player ライブストリームに接続できなくなります。 ModalDialogオブジェクトが作成され、その中にカスタム画像が配置されてから、ModalDialogが表示されます。 ModalDialogが閉じている場合、デフォルトのエラーが表示されます。

    ペンを見る 18199-ライブカスタムエラーメッセージ by Brightcove ラーニングサービス(@rcrooks1969)上 コードペン.

    ソースコード

    表示 GitHubの完全なソリューション.

    CodePenの使用

    上記のCodePenを効果的に使用するためのヒントをいくつか紹介します。

    • プレーヤーの実際の表示を切り替えるには、 Result ボタン。
    • ストリーミングを停止する場合は上部の HTML / CSS / JS ボタンを押して、1つのコードタイプを表示します。
    • このドキュメントの後半で、アプリケーションで使用されるロジック、フロー、およびスタイリングについては、 Player/ HTML設定, アプリケーションフローアプリケーションスタイリング セクション。 これらのセクションの情報に従う最善の方法は次のとおりです。
      1. ストリーミングを停止する場合は上部の EDIT ON CODEPEN CodePenのボタンをクリックして、XNUMXつのブラウザ/ブラウザタブでコードを使用できるようにします。
      2. CodePenで、表示するコードを調整します。 CodePen内のさまざまなコードセクションの幅を変更できます。
      3. 表示 Player/ HTML設定, アプリケーションフロー および アプリケーションスタイリング 別のブラウザ/ブラウザタブのセクション コードの説明に従うと同時にコードを見ることができるようになります。

    開発手順

    推奨される開発手順は次のとおりです。

    1. ページはめ込み埋め込みを使用する player の機能をテストするための実装 player、プラグイン、CSS(CSSが必要な場合)
    2. ローカルテストのためにプラグインのJavaScriptとCSSを別々のファイルに入れる
    3. 何らかのエラーが発生したら、プラグインコードとCSSをサーバーにデプロイします
    4. Linuxを使う Studio プラグインとCSSを player
    5. ページはめ込み埋め込みを置き換える player iframe実装の方が適していると判断した場合の実装(次のセクションで詳しく説明します)

    これらの手順の詳細については、 ステップバイステップ:プラグイン開発 ガイド。

    iframeまたはページはめ込み

    拡張機能を開発する際に Brightcove Player コードがiframeまたはページはめ込み埋め込み実装に最適かどうかを判断する必要があります。 ベストプラクティスは、iframe実装で使用するプラグインを構築することです。 iframeを使用する利点 player には次の値があります:

    • 既存の JavaScript および/または CSS との衝突なし
    • 自動的にプレーヤーがレスポンシブデザインになります
    • iframeはソーシャルメディアアプリでの使用を容易にします(または動画が他のアプリに「移動」する必要があるときはいつでも)

    ページはめ込みを統合しますが player より複雑になる可能性があります。その実装に関するコードを計画する場合があります。 一般化するには、このアプローチは、含まれているページが player。 具体的には、いくつかの例を示します。

    • 含まれているページのコードはリッスンして動作する必要があります player イベント
    • player 含まれているページのスタイルを使用する
    • iframeによって、含まれているページからのリダイレクトのように、アプリケーションロジックが失敗する

    最終的な実装でiframeコードを使用しない場合でも、JavaScriptのプラグインとCSSの別のファイルを使用して、ページはめ込みの埋め込みコードを使用できます。 これはロジックをカプセル化し、複数で簡単に使用できるようにします players.

    使用されるAPI /プラグインリソース

    APIメソッド APIイベント APIプロパティ
    addChild() エラー player。エラーコード
    に() モーダルクローズ
    期間()
    player.errorDisplay.hide()
    player.errorDisplay.show()

    Player/ HTML設定

    このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。 さらに、発行される埋め込みコードには含まれない、追加すべき他のHTML要素についても説明をします。

    Player の監視

    特別な構成は必要ありません。 Brightcove Player このサンプル用に作成します。

    その他のHTML

    他のHTML要素はページに追加されません。

    アプリケーションフロー

    このアプリケーションの背後にある基本的なロジックは次のとおりです。

    • ModalDialogのインスタンスを作成し、その中にカスタムイメージを配置します。
    • エラーをリスンし、正しいエラータイプであれば、カスタムModalDialogを表示します。
    • ビデオの視聴者がカスタムModalDialogを閉じることを選択した場合は、デフォルトのエラーメッセージを表示します。

    HTMLを作成する div 素子

    以下のラベルが付いたコードを探します:

    // ### Create a div in which to place HTML content and place image inside ###

    HTMLを作成する div ライブフィードが機能していない場合は、表示する画像を配置します。

    HTMLを含むオブジェクトを構築する div 要素が配置されます

    以下のラベルが付いたコードを探します:

    // ### Define options object to be used for modal content ###

    これは、ModalDialogを作成するときに必要です。

    ModalDialogを作成し、イメージをコンテンツとして配置します。

    以下のラベルが付いたコードを探します:

    // ### Create Modal with options object ###

    これは、ModalDialogインスタンスを作成してそれを player。 デフォルトでは表示されません。

    ディスパッチするエラーをリスンする

    以下のラベルが付いたコードを探します:

    // ### Listen for an error event ###

    エラーがディスパッチされると、エラーコードと期間が取得されます。

    エラーの種類を確認する

    以下のラベルが付いたコードを探します:

    // ### Check if the error code and duration mean no video has loaded ###

    ライブストリームが再生されていないかどうかを確認するには、最初に code is 4 (MEDIA_ERR_SRC_NOT_SUPPORTED)と duration is 0。 これがtrueの場合、表示されるデフォルトのエラーを非表示にし、カスタムModalDialogインスタンスを表示します。

    表示のデフォルトエラーはカスタムですModalDialogが閉じています

    以下のラベルが付いたコードを探します:

    // ### If custom modal error closed, show the default error ###

    これは、この動作を実装する場合にのみ実行されます。 単に modalclose イベントハンドラにはデフォルトエラーが表示されます。

    アプリケーションスタイリング

    唯一のCSSは単に player.

    プラグインコード

    通常、JavaScriptを Brightcove Player プラグインの名目上の変更が必要です。 必要な変更の1つは、 ready() プラグインを定義するコードを使用します。

    ここでは、一般的にプレーヤーで使用されるJavaScriptコードの初期化コードを示します。

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      ...
    });

    最初の行を変更して、Brightcove Player プラグインで利用可能な初期化コードに変更します。

    videojs.registerPlugin('pluginName', function(options) {
      var myPlayer = this;
      ...
    });

    前述のように、このドキュメントの対応するGitHubリポジトリにプラグインのJavaScriptコードが表示されます。 liveCustomError.js.

    プラグインを使用して player

    CSSとJavaScriptファイルがインターネットにアクセス可能な場所に配備しますと、プラグインをプレーヤーで利用する準備が整います。Studio の Player モジュールにて、プレーヤーを選択して、「プラグイン」セクションにて、そのプレーヤーに対して、CSS と JavaScript のURLを追加します。また、プラグインの名前およびオプション(オプションが必要な場合には)も合わせて設定します。


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