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

    Brightcove Player サンプル:プレビュー後に再生するための登録

    このトピックでは、 Brightcove Player ユーザーがビデオを表示するにはフォームに入力する必要があります。 これはのバリエーションです 再生登録する サンプル - このサンプルでは、​​視聴者には、登録を依頼される前に3の動画の2番目のプレビューが与えられます。

    Player 例

    この例では、オーバーレイを表示し、 player ビデオ再生の3秒後にボタンを制御および再生し、ユーザーにログイン/登録を促します。 ユーザーがオーバーレイのフォームから登録またはログインすることを選択すると、オーバーレイが非表示になり、ビデオが再生されます。 機能をテストする フォーム内のボタンをクリックする.

    (サンプルでは実際にフィールドの検証や認証は行われないため、 今すぐ登録 or ログイン 次にパスワード 送信 ボタンが表示されると、ビデオが再生されます)。

    ペンを見る 18158-register-play-after-preview ブライトコーブラーニングサービス(@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イベント Brightcove Player プラグイン
    遊びます() 時間更新 表示オーバーレイプラグイン
    一時停止()    
    に()    
    オフ()    
    addClass()    
    removeClass()    
    現在の時刻()    

    Player/ HTML設定

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

    プレーヤーの設定

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

    その他のHTML

    適切なタグは、表示オーバーレイプラグインのCSSとJavaScriptにリンクするために使用されます。

    アプリケーションフロー

    コードに入る前に、アプリケーションのロジックを見てみましょう:

    論理図

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

    • オーバーレイを設定します。
    • 再生の3秒後にビデオを一時停止する。
    • フォームを処理します。
    • フォームが記入されたらビデオを開始します。

    オーバーレイを設定する

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

    // ### Configure the Overlay ###

    オーバレイは、3秒で表示されるように設定されています(フォームが表示されます)。 フォームはオーバーレイで使用される長い文字列で作成されます。 overlayContent.

    プレビュー時間が経過したかどうかを確認して行動する

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

    // ### Act if preview time is passed ###

    このコードでは、 timeupdate eventは、3秒が経過したかどうかを確認するイベントハンドラーを継続的に呼び出します。 注意してください player コントロールは非表示になっているため、ユーザーはフォームの下でビデオを再生できません。 また、イベントリスナーが削除され、時間のチェックが実行されなくなりました。

    フォームを処理する

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

    // ### Process the form ###

    フォームの処理には、標準HTMLとJavaScriptが使用されます。

    フォームの記入時にビデオを再生する

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

    // ### Plays video when form filled out ###

    フォームが記入されると、オーバーレイフォームが非表示になり、コントロールが表示され、ビデオの再生が再開されます。

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

    広範な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コードが表示されます。 register-to-play-after-preview.js.

    プラグインを使用して player

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


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