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

    Brightcove Playerサンプル : ループ動画の作成

    このトピックでは、ビデオを自動的にリプレイするように Brightcove プレーヤーを設定する方法について説明します。

    プレーヤーの例

    ループするビデオを使用したい場合があります。無期限にループする動画は、Web サイトの視聴者の気を散らす可能性があることに注意してください。次の使用例は、ビデオを 3 回ループし、ビデオの再生を停止します。

    ペンを見る18176-ビデオループの作成 Brightcove Learning Services（ @ bcls1969） オンCodePen。

    ソースコード

    GitHub でソリューション全体を見る事ができます。

    CodePen を使用する

    上記の CodePen を効果的に使用するためのヒントは次のとおりです。

    • Result (結果)ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
    • HTML/CSS/JS ボタンをクリックすると、いずれかのコードタイプが表示されます。
    • このドキュメントの後半では、アプリケーションで使用されるロジック、フロー、およびスタイル設定については、 プレーヤー/HTML設定、アプリケーションフロー および アプリケーションのスタイル設定 のセクションで説明します。これらのセクションの情報を追う最良の方法は、次のとおりです。
      1. CodePen の EDIT ON CODEPEN ボタンをクリックし、1 つのブラウザ/ブラウザ・タブでコードを使用できるようにします。
      2. CodePen で、表示させたいコードを調整します。CodePen では、さまざまなコードセクションの幅を変更できます。
      3. プレーヤー/HTML設定、アプリケーション フロー および/または アプリケーションのスタイル設定 セクションを、別のブラウザ/ブラウザ・タブで表示します。これで、コードの説明に従うと同時に、コードを表示できるようになります。

    開発シーケンス

    以下は、推奨される開発順序になります。

    1. ページ内埋め込みプレーヤーの実装を使用して、プレーヤー、プラグイン、CSS の機能をテストします (CSS が必要な場合)。
    2. プラグインの JavaScript と CSS をローカルテスト用に別々のファイルにします。
    3. エラーが解決したら、プラグインのコードと CSS をサーバーにデプロイします。
    4. Studio を使用してプラグインと CSS をプレーヤーに追加します。
    5. iframe の実装が適切であると判断した場合は、ページ内埋め込みプレーヤーの実装を置き換えます (次のセクションで詳しく説明します)。

    これらの手順の詳細については、ステップ・バイ・ステップ : プラグイン開発ガイド を参照してください。

    iframe またはページ内埋め込み

    Brightcove プレーヤー用の拡張機能を開発する場合、そのコードが iframe またはページ内埋め込み実装のどちらが最適なのかを決定する必要があります。ベストプラクティスの推奨は、iframe 実装で使用するプラグインを構築することです。iframe プレーヤーを使用する利点は次のとおりです。

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

    ページ内埋め込みプレーヤーの統合はより複雑になりますが、その実装を中心にコードを計画する場合もあります。 一般化すると、このアプローチは、インクルード ページがプレーヤーと通信する必要がある場合に最適です。 具体的には、以下のような例があります:

    • インクルード ページのコードは、プレーヤーのイベントをリッスンし、それに対応する必要がある場合。
    • プレーヤーはインクルード ページのスタイルを使用する場合。
    • iframe により、インクルード ページからのリダイレクトなど、アプリのロジックが失敗する場合。

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

    API/プラグイン リソースの使用

    API メソッド API イベント
    play() ended

    プレーヤー/HTML の設定

    このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。また、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。

    プレーヤーの設定

    このサンプル用に作成する Brightcove プレーヤーには、特別な設定は必要ありません。

    その他のHTML

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

    アプリケーション フロー

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

    • プレーヤーのロード時にビデオの再生を開始します。
    • ビデオをもう2回再生してから、ビデオの再生を停止します。

    ビデオを3回再生して止める

    ラベルが付けられたコードを見つけてください。

      // +++ Loop video 3 times +++

    プレーヤー ended (終了)イベントを聞いて、ビデオが再生された回数を確認します。3回再生したら、再びビデオ再生を開始しません。

    アプリケーションのスタイル設定

    このサンプルでは、追加のスタイリングは必要ありません。

    プラグインコード

    通常、JavaScript を Brightcove プレーヤープラグインに変換する場合は、名目上の変更が必要です。必要な変更の 1 つは、ready() メソッドの標準的な使用をプラグインを定義するコードに置き換えることです。

    以下は、プレーヤーで動作する一般的に使用される JavaScript の開始コードです：

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

    最初の行を変更して、Brightcove Player プラグインを起動するための標準構文を使用します: 

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

    前述したように、このプラグインの JavaScript コードは、このドキュメントの対応する GitHub リポジトリで見ることができます: video-loop.js 。

    プレーヤーでプラグインを使用する

    プラグインの CSS ファイルと JavaScript ファイルをインターネットからアクセス可能な場所に保存したら、プレーヤーでプラグインを使用できます。Studio の PLAYERS モジュールでプレーヤーを選択し、プラグイン セクションで CSS ファイルと JavaScript ファイルの URL を追加し、オプションが必要な場合は Name と Options も追加します。

    代替ソリューション

    ページ内埋め込みコードの実装のみを使用する場合は、次の 2 つの設定変更を実行してループを作成できます。

    • HTMLページの video-js 要素に loop 属性を追加します。
    • Studio (プレーヤー プロパティの 再生 セクション) または Player Management API を使用して、プレーヤーを自動再生するように設定します。自動再生は複雑な問題であり、詳細については、自動再生に関する考慮事項 を参照してください。

    このソリューションは無期限にループすることに注意してください。

    最終的なソリューション コードは次のようになります（Studio でプレーヤーに自動再生が設定されていることを忘れないで下さい）:

      <!doctype html>
  <html>
  
  <head>
      <meta charset="UTF-8">
      <title>Video Loop</title>
  </head>
  
  <body>
  
    <video-js id="video_1" style="width: 640px; height: 360px;"
         data-video-id="4077874637001"
         data-account="1752604059001"
         data-player="Vkg9W3ZXKe"
         data-embed="default"
         class="video-js"
         controls
         loop></video-js>
  
      <script src="https://players.brightcove.net/1752604059001/Vkg9W3ZXKe_default/index.min.js"></script>
  
  </body>
  </html>
      <!doctype html>
  <html>
  
  <head>
      <meta charset="UTF-8">
      <title>Video Loop</title>
  </head>
  
  <body>
  
    <video-js id="video_1" style="width: 640px; height: 360px;"
         data-account="1752604059001"
         data-player="Vkg9W3ZXKe"
         data-embed="default"
         class="video-js"
         controls
         loop></video-js>
  
      <script src="https://players.brightcove.net/1752604059001/Vkg9W3ZXKe_default/index.min.js"></script>
  
  </body>
  </html>

    以上です — これで完了です。このトピックの残りの手順は省略する事ができます。

    ビデオのループ回数を制限したい場合や、iframe 実装を使用したい場合は、このドキュメントの前のセクションで説明したコードを使用して下さい。

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