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

    Brightcove Player サンプル:カスタムイベントでの巻き戻し

    このトピックでは、カスタムイベントをディスパッチしてリスンすることによって巻き戻しボタンを実装する方法を学習します。

    概要

    にもかかわらず Brightcove Player には、すぐに使用できる多数のイベントが用意されています。独自のカスタムイベントを使用して、DOMオブジェクトとイベントリスナー間の依存関係を切り離して排除することができます。 このイベント駆動型モデルは、考慮すべきアーキテクチャ上の選択です。

    このサンプルは、コントロールバーに戻るボタンを追加します。 ユーザーが戻るボタンをクリックすると、巻き戻しの時間とともにカスタムイベントがトリガーされます。 カスタムイベントリスナーは、現在のビデオ位置を検出し、ビデオを巻き戻します。

    Player 例

    ビデオの再生を開始します。 次に、戻るボタンをクリックします。

    巻き戻しビデオボタン

    ビデオの再生が5秒後になることがわかります。

    ペンを見る 18150-trigger-rewind-custom-event by Brightcove ラーニングサービス(@bcls1969)上 コードペン.

    ソースコード

    表示 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イベント
    spacer.appendChild() トリガー
    現在の時刻() on

    Player/ HTML設定

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

    Player の監視

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

    その他のHTML

    あなたは id 属性を video-js タグは player 埋め込みコード。

    <video-js id="myPlayerID"
    ...

    アプリケーションフロー

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

    • 巻き戻しボタンのDOMに新しい要素を作成します。
    • 巻き戻しボタンを player コントロールバー。
    • ユーザーが巻戻しボタンをクリックしたときに聴く。 クリックすると、カスタムイベントをデータでトリガーします。
    • カスタムイベントをデータで聴いて、定義されたデータに基づいてビデオ再生を巻き戻します。

    DOMに要素を追加する

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

    // +++ Add elements to the DOM +++

    新しいを作成します <div> 要素をDOM内に配置し、 id 値を持つ属性 戻るボタン。 新しいを作成します <img> 要素をDOM内に配置し、 src 巻戻しボタンのURLを持つ属性。

    巻き戻しボタンをコントロールバーに追加する

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

    // +++ Add rewind button to the control bar +++

    ゲット spacer 要素をコントロールバーに追加し、巻き戻しボタンの要素を追加します。

    巻き戻しボタンを聴く

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

    // +++ Listen for the rewind button +++

    〜に backButton 要素のリスナーを追加する onclick イベント。 クリックすると、カスタムイベントをデータでトリガーします。

    巻き戻しイベントを聞く

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

    // +++ Listen for rewind event +++

    カスタムイベントをデータで聴く。 トリガーされると、ビデオ再生を rewindAmt コードで定義されています..

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

    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コードが表示されます。 カスタムイベント.js.

    カスタムイベントの理解

    カスタムイベントを使用すると、DOMオブジェクトとイベントリスナー間の依存関係を切り離して、イベント駆動型のアーキテクチャモデルを作成できます。

    派遣

    カスタムイベントをディスパッチするには、 trigger() 方法は次のとおりです。

    // trigger a custom event
    myPlayer.trigger('eventName');
    or
    // trigger a custom event with data
    myPlayer.trigger('eventName', {data: 'some data'});

    カスタムイベントのディスパッチの詳細については、 Player API index.

    このサンプルでは、​​コードは次の処理を行います。

    • 名前付きのカスタムイベントを送出します。 rewind
    • 名前付きのデータオブジェクトを送信します。 amount と値 5 - この値が設定されているJavaScriptコードに表示されます
    // trigger a custom event with data
    myPlayer.trigger('rewind', {'amount': rewindAmount});

    聞く

    カスタムイベントをリッスンするには、 on() 方法は次のとおりです。

    // listen for a custom event
    player.on('eventName', function(evt){});
    or
    // listen for a custom event with data
    player.on('eventName', function(evt,data){});

    使用することもできます one() イベントリスナーを1回だけトリガーしてから削除する場合は、このメソッドを使用します。 イベントリスンの詳細については、 Player API index.

    このサンプルでは、​​コードは次の処理を行います。

    • 名前付きカスタムイベントをリッスンします。 rewind
    • イベントオブジェクトとデータオブジェクトを関数に渡します。
    // listen for a custom event with data
     myPlayer.on('rewind',function(evt,data){
    });

    コンソールにイベントオブジェクトとデータオブジェクトを表示すると、次のようになります。

    カスタムイベントデータ
    カスタムイベントデータ

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