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

    ステップバイステップ： Brightcove Player

    このトピックでは、実践的な手順を説明します。 Brightcove Player。 外観をカスタマイズするには Brightcove Player カスケードスタイルシート（CSS）を使用する必要があります。 このドキュメントでは、最初にビデオをオーバーレイする再生ボタンの外観と位置を変更するプロセスについて説明します。

    概要

    このドキュメントでは、 Brightcove Player、次にXNUMXつの異なるコード実装を使用して、新しく作成された player。 プログラムでビデオの再生を開始し、プラグインを player.

    このクイックスタートでは、次のタスクを実行します。

    • 作る player 使用して Studio
    • でビデオを公開する player 使用して Studio
    • iframeを使用する player 実装
    • プログラムを利用してビデオを再生する
    • プログラムでビデオを再生する
    • オーバーレイプラグインを player

    作ります player

    新しいを作成するには player、 次の手順を実行します。

    1. にログインします Studio at https://studio.brightcove.com/ .
    2. 現在のアカウント名がページの右上隅に表示されます。 複数のアカウントがある場合は、 現在のアカウント名のリンクをクリックし, リンクして、作成するアカウントを選択します player.
      現在のアカウントを選択
    3. ストリーミングを停止する場合は上部の Players の作成と管理 リンクをクリックします。
    4. ストリーミングを停止する場合は上部の 新しいプレーヤー ボタンをクリック ボタン。
    5. 入力します お名前 と 短い説明 のために player。 このクイックスタートでは、 player 名前は サンプル Player .
      player ディアグロ
    6. 新しく作成された player のリストに表示されます players.
      の一覧 players

    ビデオを公開 player

    新しく作成した動画を公開します player Mediaモジュール内。 ビデオをあなたと関連付けると player 動画を公開すると、XNUMXつの実装にアクセスして、自分の動画を表示できます player.

    でビデオを公開するには player、 次の手順を実行します：

    1. In Studio をクリックしてMediaモジュールに移動します メディア メインメニューのリンク。
    2. で公開したいオーディオトラックがない動画の行をクリックします player、[OK]をクリックします 公開および埋め込み... .
      動画を選択
    3. から ドロップダウンリストから Player ドロップダウンメニューで、新しく作成した player.
      UIを公開する
    4. これで、XNUMXつの実装にアクセスできます。 player: スタンダード （iframe）、 高度な （ページはめ込み）と ブラウザでプレビュー URL。 このクイックスタートの後半で何度もコードをコピーするため、このウィンドウは閉じないでください。
      UIを公開する

    JSONエディターを使用してビデオを player。 ビデオコンテンツを構成するには、次の手順に従います。

    1. サンプルのリンクをクリックします Player を開く player プロパティページ。
    2. ナビゲーションヘッダーの JSONエディタ 左側のナビゲーションメニュー。
    3. JSONのSECOND TO THE LASTブレースの後にコンマを配置します。
    4. 最後の右中括弧のすぐ上に、以下を追加して、ビデオとポスターを player。 もちろん、あなた自身のビデオとポスターを代用することができます。 
      "media": {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/BirdsOfAFeather.mp4",
    "type": "video/mp4"
  }],
    "poster": {
      "highres": "//solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather.jpg"
    }
}
    5. JSONは次のようになります（追加されたテキストは黄色で強調表示されます）。
      JSONエディタ
    6. ナビゲーションヘッダーの 保存 .
    1. ナビゲーションヘッダーの パブリッシュ＆埋め込み その後 変更を公開する 公開する player.
    2. 変更を公開したのと同じダイアログで、標準（iframe）または詳細（ページはめ込み埋め込み）をコピーすることもできます player 実装コード。 実装コードは、 サイジング ( 敏感な or 固定の ), アスペクト比 と 寸法 で行われ、保存された選択 プレーヤー情報 オプション。
    3. 両方のコード実装タイプを後で使用できるようにテキストファイルにコピーします。

    標準コードを使用

    1. HTMLページを作成して貼り付けます スタンダード （iframe）ボディへの前のステップからのコード。
    2. このページを閲覧すると、ビデオが反映されます サイジング ( 敏感な or 固定の ), アスペクト比 と 寸法 行われた選択。

    高度な埋め込みコードを使用する

    このセクションでは、高度な（ページはめ込み）コード実装を使用します。

    1. HTMLページを作成して貼り付けます 高度な （ページはめ込み）上から本体へのコード。
    2. 次のように表示されるコードを調べて、属性を確認します。 
      <video-js data-account="1507807800001"
  data-player="EUYJo0AOB"
  data-embed="default"
  controls=""
  data-video-id="6071787405001"
  data-playlist-id=""
  data-application-id=""
  width="640" height="360"></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
      • data-account ：アカウントID
      • data-player ： Brightcove Player
      • data-embed ：どちらでも default もし player 親の埋め込み、または親のID player; 湖 埋め込みAPIガイド 埋め込み（親/子）の詳細については players)
      • controls ：ブール値として機能します player コントロールが存在する必要があります（ controls タグに含まれる属性）、または表示されません（ controls タグに存在しない属性）
      • data-video-id ： Video Cloud ビデオ
      • data-playlist-id ： Video Cloud プレイリスト
      • data-application-id ：シングルを再利用できます player、ただしサイトごとまたはアプリケーションごとに分析を区別する。 見る へのアプリケーションIDの追加 Player 埋め込みコード 詳しく知る
      • width & height ：セット player 寸法
      • <script> タグ：ページはめ込みコードを使用するたびに、 script 鬼ごっこ; 参照されるJavaScriptファイルには、特定の player
    3. 次のように表示されるコードを調べて、属性を確認します。 
      <video data-account="1507807800001"
  data-player="H15p1gTkg"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video>
<script src="https://players.brightcove.net/1507807800001/H15p1gTkg_default/index.min.js"></script>
      • data-account ：アカウントID
      • data-player ： Brightcove Player
      • data-embed ：どちらでも default もし player 親の埋め込み、または親のID player; 湖 埋め込みAPIガイド 埋め込み（親/子）の詳細については players)
      • class ： 標準 Brightcove Player ページはめ込み埋め込みコードに関連付けられたCSSクラス
      • controls ：ブール値として機能します player コントロールが存在する必要があります（ controls タグに含まれる属性）、または表示されません（ controls タグに存在しない属性）
      • <script> tag ：特定に関連付けられたすべての関連付けられたJavaScriptおよびCSS player
    4. このページを閲覧すると、ビデオが反映されます サイジング ( 敏感な or 固定の ), アスペクト比 と 寸法 行われた選択。

    プログラムでビデオを再生する

    使用する豊富なAPIがあります Brightcove Player。 このセクションでは、 play() プログラムでビデオの再生を開始するメソッド。

    1. 追加する id 属性を video 値を持つタグ myPlayerID . 
      <video id="myPlayerID"
    2. 終わりのすぐ上 body タグ、挿入 script ブロック。 
      <script>
</script>

</body>
    3. スクリプトブロックでは、 on() それを聞く方法 loadedmetadata イベント。 イベントがディスパッチされると、匿名のイベントハンドラー関数が呼び出されます。 
       videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
});
    4. 関数にローカルな変数を作成し、 myPlayer を割り当てる player インスタンス、として参照 this 、その変数に。 
      var myPlayer = this;
    5. ほとんどのブラウザでは、オーディオトラックのある動画の自動再生ができなくなったため、 muted() 動画をミュートし、動画が自動再生されるようにする方法。 
      myPlayer.muted(true);

      見ます 自動再生に関する考慮事項 自動再生の問題について詳しくは、ドキュメントを参照してください。

    6. 使用 player's play() ビデオを開始するメソッド。 
      myPlayer.play();
    7. スクリプトブロックが次のように表示されることを確認します。 
       <script>
  videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
    var myPlayer = this;
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>
    8. 変更を保存し、ブラウザーでページを更新して、ビデオの再生が自動的に開始されることを確認します。 オーディオトラックを含むビデオを選択した場合は、再生ボタンをクリックしてビデオを再生する必要があります。

    プラグインを追加

    Brightcove Player を強化するために利用できる多くのプラグインがあります player。 そのようなプラグインのXNUMXつがオーバーレイプラグインです。 このセクションでは、前のセクションで完了したページはめ込み埋め込みコードにそのプラグインを追加します。 プラグインの詳細については、 表示オーバーレイプラグイン の資料をご参照ください。

    プラグインを使用する場合は、プラグイン実装であるJavaScriptへのパスを指定する必要があります。 プラグインで必要な場合は、CSSへのリンクを提供する必要がある場合もあります。

    1. 終わりのすぐ上 head タグ、オーバーレイプラグインのCSSの場所を指す次のリンクステートメントを挿入します。 
       <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'>
</head>
    2. 前に追加したスクリプトブロックのすぐ上に、以下を追加します script オーバーレイプラグイン機能を実装する実際のJavaScriptコードであるタグ。 
      <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script>

<script>
  videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
    3. 直後の play() メソッドを使用する場合は、 player's overlay() メソッドを使用して、JSON設定オブジェクトを渡す準備をするために、中括弧をパラメーターとして追加します。 
      myPlayer.overlay({
});
    4. 複数のオーバーレイオブジェクトを配列としてプラグインに渡し、さまざまなコンテンツをさまざまなタイミングでさまざまな場所に表示できます。 この場合、テキストを表示するオーバーレイオブジェクトがXNUMXつだけ渡され、動画の再生中にのみ表示されます。 ビデオが一時停止すると、オーバーレイは表示されません。 これを実装するには、次のオーバーレイオブジェクトを構成パラメーターとして追加します。 
       overlays: [{
  content: 'This event-triggered overlay message appears when the video is playing',
  start: 'play',
  end: 'pause'
}]
    5. スクリプトブロックが次のように表示され、オーバーレイプラグインが呼び出されて正しく構成されていることを確認します。 
         <script>
    videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
      var myPlayer = this;
      myPlayer.muted(true);
      myPlayer.play();
      myPlayer.overlay({
        overlays: [{
          content: 'This event-triggered overlay message appears when the video is playing',
          start: 'play',
          end: 'pause'
        }]
      });
    });
  </script>
    6. 変更を保存し、ブラウザーでページを更新して、ビデオの再生が自動的に開始されることを確認します。 ビデオが始まるとオーバーレイが表示されます。 ビデオを一時停止して、オーバーレイが削除されたことを確認します。
    7. レビューのために、ページ全体のHTMLコードをここに表示できます。 
      <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>
  <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'>
</head>

<body>

  <video  id="myPlayerID"
    data-video-id="4093372393001"
    data-account="1507807800001"
    data-player="H15p1gTkg"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video>
  <script src="https://players.brightcove.net/1507807800001/H15p1gTkg_default/index.min.js"></script>

  <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script>

  <script>
    videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
      var myPlayer = this;
      myPlayer.muted(true);
      myPlayer.play();
      myPlayer.overlay({
        overlays: [{
          content: 'This event-triggered overlay message appears when the video is playing',
          start: 'play',
          end: 'pause'
        }]
      });
    });
  </script>

  </body>

</html>
      <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>
  <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'>
</head>

<body>
  <video id="myPlayerID"
    data-account="3676484087001"
    data-player="78ef7d78-18d9-4459-a6da-d94e46163076"
    data-embed="default"
    class="video-js"
    controls></video>
  <script src="https://players.brightcove.net/3676484087001/78ef7d78-18d9-4459-a6da-d94e46163076_default/index.min.js"></script>
  <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script>
  <script>
    videojs.getPlayer('myPlayerID').on('loadedmetadata', function () {
      var myPlayer = this;
      myPlayer.play();
      myPlayer.overlay({
        overlays: [{
          content: 'This event-triggered overlay message appears when the video is playing',
          start: 'play',
          end: 'pause'
        }]
      });
    });
  </script>
</body>

</html>
    ページの最終更新日：29年2020月XNUMX日