Brightcove Interactivity Javascript Embed API

Brightcove Interactivity Embed API を使用すると、ビューアーおよび/またはエディターを作成することができます。

Viewer API

Brightcove Interactivity のアノテーション Viewer は、ページ上の既存の動画要素に対してアノテーションを表示することをサポートしています。既存の video JavaScript オブジェクト、iframe、HTML 要素などを Viewer API メソッドに渡して使用します。

例



  player.interactivityViewer({
    css: "https://modernizr.com/i/css/modernizr-2.1.1.css?v=1",
    width: 640,
    height: 360,
    trackId: 640,
    autoplay: true
});

オプション

width（オプション）

Brightcove ではこのパラメータはサポートされていません。プレーヤー オプションで定義する必要があります。

height（オプション）

Brightcove ではこのパラメータはサポートされていません。プレーヤー オプションで定義する必要があります。

css（オプション）

読み込む CSS ファイルの場所を指定します。

trackId

読み込む Brightcove Interactivity コメンタリートラックの ID。Brightcove Interactivity における「トラック」は、ポップアップ、描画、音声などのコメント機能を格納するコンテナです。

autoplay（オプション）

true に設定すると、動画が読み込まれ、www.hapyak.com からトラックがダウンロードされた後、自動的にコメント付き動画の再生が開始されます。

onLoad（オプション）

Veiwer が読み込まれた際に呼び出される関数。1つの引数として Interactivity Viewer オブジェクトが渡されます（以下参照）。

onLoadAnnotations（オプション）

すべてのアノテーションが読み込まれた際に呼び出される関数です。

resetVariables（オプション）

true に設定すると、クイズ、クリック、iframe スクリプトなどによって設定されたすべてのトラック変数が読み込み前にクリアされます。

高度なオプション

groupId（オプション、APIキーが必要）

variables

動的アノテーションで使用可能な変数のディクショナリ（連想配列）です。

player.interactivityViewer
  variables: {
      courseName: "Math 101"
  }
});

environment (オプションまたはデバッグ用)

有効な値は "production"（本番環境）、"staging"（ステージング環境）、"feature"（機能開発環境）です。特定の環境でのテストを行う場合にのみ使用されます。

player.interactivityViewer
  environment: 'production'
});

Viewer API は、動画およびデータに関連する複数のイベントコールバックをトリガーします。イベントコールバックは、イベント名を addEventListener に渡して登録するか（下記参照）、オプションとしてイベントコールバックを指定することで登録できます。その場合、イベント名の前に on を付けたキー名を使用します。

たとえば、動画の再生が開始されるたびに発火する play イベントは、以下のようにオプションとして登録できます：

player.interactivityViewer
  /* ...other options here... */
  onplay: function() {
      console.log('video started playing');
  }
});

同じことを実現する別の方法：

player.interactivityViewer
  /* ...other options here... */
  onload: function(viewer) {
      viewer.addEventListener('play', function () {
          console.log('video started playing');
      });
  }
});
<

addEventListener を使用する利点は、複数のコールバック関数を登録できること、そして removeEventListener メソッドを使ってリスナーを削除できることです。

以下のイベントが利用可能です：

load

load イベントは、Viewer が読み込まれたときに発火します。コールバック関数には Interactivity Viewer オブジェクトが引数として渡されます。（このイベントは addEventListener では登録できません。）

loadannotations

すべてのアノテーションが読み込まれたときに発火します。

durationchange

動画の再生時間が API によって取得可能になったときに発火します。

loadedmetadata

動画の寸法（高さと幅）および再生時間が API によって取得可能になったときに発火します。

pause

動画が一時停止されたときに発火します。

play

動画が再生されたときに発火します。

data

データ変数が変更されるたびに発火します。コールバック関数には2つの引数が渡されます: すべてのデータ変数のハッシュ、および前回の発火以降に変更されたデータ変数のハッシュです。

authchange

ユーザー認証データが変更されるたびに発火します。コールバック関数には1つの引数として、すべてのユーザー認証プロパティを含むハッシュが渡されます。

customtrackingevent

アナリティクスでトラッキングされるイベントが発生するたびに発火します。これには再生、停止、シークといった動画の操作や、アノテーションの表示・操作が含まれます。コールバック関数にはイベントとそのすべてのプロパティを記述したハッシュが1つ渡されます。

Interactivity Viewer

onLoad コールバックには Interactivity Viewer オブジェクトが渡され、このオブジェクトは以下のメソッドおよびプロパティをサポートします。

メソッド

getTrackId()

現在読み込まれているトラックのID（整数）を返します。

resize(width, height)

プレーヤーのサイズを指定された height および width に変更します。

play()

動画を再生します。

pause()

動画を一時停止します。

resetVariables()

クイズ、クリック、iframe スクリプトなどによって設定されたすべてのトラック変数をリセットします。

getData(name)

name によって指定された変数の値を返します。引数なしで呼び出された場合は、すべての変数の値を含むオブジェクトのハッシュを返します。

setData(name, value)

name によって指定された変数の値を設定します。第2引数が省略された場合、そのキーの値はクリアされます。

第1引数が null の場合、または1つのオブジェクトが渡された場合、そのオブジェクトは複数の変数値を設定するためのハッシュとして使用されます。

destroy()

エディターをシャットダウンし、クリーンアップを実行します。

プロパティ

duration

動画の長さ（秒単位）。onloadedmetadata イベントが発火するまで、この値は NaN になります。このプロパティは読み取り専用です。

currentTime

再生ヘッドの現在の動画時間（秒単位）。このプロパティを設定することでシークを行うことができます。currentTime が負の数、または duration を超える値に設定された場合、シークは実行されません。

paused

動画が再生中か一時停止中かを示す真偽値。ネットワークからの読み込み中にスタックしている場合、paused が false でも動画が再生されていないことがあります。このプロパティは読み取り専用です。

カスタムユーザー識別変数の設定

Interactivity のアナリティクスでは、追加情報を追跡するように更新することができます。この場合、userId および username を設定することができます。この情報はアナリティクスの指標内でユーザーを識別するために使用されます。

userId および username のカスタム変数をクエリパラメーターとして追加します。

  • userId 型: 文字列（String）
  • username 型: 文字列（String）
https://players.brightcove.net/{BC_ACCOUNT}/{YOUR_PLAYER}/index.html?interactivityProjectId={PROJECT_ID}&videoId={VIDEO_ID}&userId={USER_ID}&username={USERNAME}


userId および username のカスタム変数を高度な埋め込みコードにも追加することができます。

  • data-interactivity-user-id 型: 文字列（String）
  • data-interactivity-username 型: 文字列（String）

      <div style="width: 960px;">
        <video-js id="testingvid" data-account="your_account_id" data-player="your_player_id" 
        data-embed="default" controls="" data-video-id="your_video_id" data-interactivity-project-id="
        your_interactivity_project_id" data-application-id="" 
        data-interactivity-user-id="your_user-id"  data-interactivity-username="
        your_interactivity_username" width="960" height="540"
        class="vjs-fluid"></video-js></div>
      
      <script src="https://players.brightcove.net/1866680400001/oYMIsqoPB_default/index.min.js"></script>

よくある質問（FAQ）

ファイアウォールの内側でも動作しますか？
ファイアウォールが当社の HTTPS クラウドサービスへのアクセスを許可していれば、動作します。
プレーヤーやアノテーションの見た目をカスタマイズするにはどうすればいいですか？
すべてのスタイルは CSS で制御できるため、スタイリングを完全に自由にカスタマイズできます。
モバイルでも動作しますか？
HTML を動画上にオーバーレイできるブラウザであれば、アノテーションは動作します。Android や iOS デバイスでも、当社のソリューションを使用してアノテーションを表示することが可能です。