プレーヤー オブジェクト

オブジェクト: hapyak.context.player

メソッド

play()

hapyak.context.player.play()

動画を再生します。

pause()

hapyak.context.player.pause()

動画を一時停止します。

mute()

hapyak.context.player.mute()

動画の音声をミュート（消音）にします。

unmute()

hapyak.context.player.unmute()

ミュートを解除し、音声を有効にします。

volume()

hapyak.context.player.volume()

この関数に引数を渡さない場合、現在の音量を 0〜1 の数値で返します。

hapyak.context.player.volume(0.5)

0〜1 の数値を渡すと、プレーヤーの音量をその値に設定します。

addClass(classNames, selector)

hapyak.context.player.addClass(classNames, selector)

IFRAME アノテーションに対して CSS クラスを追加します。以下のパラメータを使用します：

• classNames（文字列または配列）には、myAwesomeClass のような単一のクラス名、または ['class1', 'class2'] のようなクラス名の配列を指定できます。
• selector（オプション）は、プレーヤー要素内の既存のクラス、ID、または DOM 要素をターゲットにして、そこにクラスを追加するために使用されます。セレクターが指定されていない場合は、クラスは iframe 内の親 div 要素に追加されます。

hapyak.context.player.addClass('myClass', 'div#wrapper > h1)

removeClass(classNames, selector)

hapyak.context.player.

以下の条件で、IFRAME アノテーションから CSS クラスを削除します：

• classNames（文字列または配列）には、myAwesomeClass のような単一のクラス名、または ['class1', 'class2'] のようなクラス名の配列を指定できます。
• selector（オプション）は、プレーヤー要素内の既存のクラス、ID、または DOM 要素をターゲットにして、その要素からクラスを削除するために使用されます。セレクターが指定されていない場合は、iframe 内の親 div 要素からクラスが削除されます。

例

hapyak.context.player.removeClass('myClass', 'div#wrapper > .video-title')

プロパティ

paused

読み取り専用

let playerPaused = hapyak.context.player.paused

動画が一時停止しているかどうかを取得します。

duration

読み取り専用

const videoLength = hapyak.context.player.duration // 秒単位の動画の長さ

動画の再生時間（単位：秒）を返します。

currentTime

読み取り / 書き込み可能

let currentTime = hapyak.context.player.currentTime // 秒単位の現在の時間を返す

現在の動画の再生位置を取得できます（単位：秒）。

hapyak.context.player.currentTime = 20 // 20秒にジャンプする

動画の再生位置を設定する（特定の時間にジャンプする）ことも可能です。

isEditMode

読み取り専用

hapyak.context.player.isEditMode

IFRAME が Brightcove Interactivity エディター内で表示されている場合は true を返します。

isEditing

読み取り専用

hapyak.context.player.isEditing

IFRAME が現在編集中であれば true を返します。

アノテーション オブジェクト

メソッド

hapyak.context.releaseGate()

ゲートは、視聴者が動画内で先に進むのを制限し、アノテーションと対話することを求めます。Extension API を使用する場合は、ゲートを解除するタイミングを明示的に指定する必要があります。ゲートを設定するには、アノテーションの編集タブで該当のオプションを y に切り替えます。以下のスクリーンショットをご覧ください：

• IFRAME がゲート付きに設定されている場合、このメソッドを呼び出すことでゲートを解除することができます。

プロパティ

annotationData

読み取り専用

hapyak.context.annotationData

現在のアノテーションのプロパティ一覧を返します。ここから、グループおよびプロジェクトの設定要素（CSS など）にアクセスできます。拡張機能にグループおよびプロジェクト レベルの CSS を追加してスタイルを管理するのが良い実践です。このオブジェクトを取得するには、アノテーションが読み込まれるのを待つ必要があります：

hapyak.context.addEventListener('annotationload', function(){
  console.log("annotation Data", hapyak.context.annotationData)
});

width

READ / WRITE

hapyak.context.width = pixels

Sets or gets the width of the IFRAME element.

height

READ / WRITE

hapyak.context.height = pixels

IFRAME 要素の高さを設定または取得します。

イベント

イベントは hapyak.context オブジェクトに対するイベントリスナーを通じて取得することができます：

hapyak.context.addEventListener("event", function () {
  //do something here
});

annotationload

hapyak.context.addEventListener("annotationload", function (data) {
  console.log(data)
});

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

• このイベントによって発行されるオブジェクトには、アノテーションに関連するデータのほか、グループおよびプロジェクトの設定データが含まれます。

{
  top: "19.999999999999993%",
  left: "20%",
  width: "60%",
  height: "60%",
  duration: 3,
  durationFormat: "seconds"
  durationValue: 3
  end: 6.2256
  groupConfig: {gates: true, minWidth: "0", iframeTimeout: 30000}
  height: "60%"
  id: "iframe1560519550307"
  left: "20%"
  projectConfig: {css: "", title: "Extension API example"},
  projectId: 284539
  projectTrackId: 575497
  start: 3.2256
  startTimeFormat: "seconds"
  startTimeValue: 3.2256
}

loadedmetadata

hapyak.context.addEventListener("loadedmetadata", function (data) {
    console.log(data)
});

Brightcove Interactivity のメタデータの読み込みが完了したときに発火します。

data

hapyak.context.addEventListener("data", function (data) {
  console.log(data);
});

data イベントは、環境変数に変更があったときに毎回発火します。これは頻繁に発生します。以下は返されるオブジェクトの例です。

{
  annotationIds: {1457229: true, 1457445: true, 1457474: true, 1457475: true}
  annotationsLoaded: true
  configuration: {gates: true, minWidth: "0", iframeTimeout: 30000,}
  projectAnnotations: {1457229: {}, 1457445: {}, 1457474: {}, 1457475: {}}
  projectConfig: {css: "", title: "Extension API example"}
  projectId: 284539
  projectName: "Extension API example"
}

iframeshow

hapyak.context.addEventListener("iframeshow", function () {
  console.log('Iframe has appeared');
});

IFRAME アノテーションが開始時間に達し、表示されたときに発火します。

iframehide

hapyak.context.addEventListener("iframehide", function () {
  console.log('Iframe annotation is no longer visible');
});

IFRAME アノテーションが終了時間を過ぎて非表示になったときに発火します。

timeupdate

hapyak.context.addEventListener("timeupdate", function () {
  // 現在の動画の再生時間をコンソールに出力
  console.log(hapyak.context.player.currentTime);
});

動画の再生時間が変化したとき、または動画再生中に定期的に発火します。

resized

hapyak.context.addEventListener("resized", function () {
  console.log('Player is becoming smaller');
});

プレーヤーがウィンドウサイズに応じてリサイズされたときに発火します。

play

hapyak.context.addEventListener("play", function () {
  console.log("Video is currently playing");
});

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

pause

hapyak.context.addEventListener("pause", function () {
  console.log("Player has been paused");
});

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

editModeChange

hapyak.context.addEventListener("pause", function () {
  console.log('Player has been paused');
});

Brightcove Interactivity エディター内で編集モードが変更されたときに発火します。

playerHover

hapyak.context.addEventListener("playerHover", function () {
  console.log('Mouse is being hovered within the player');
});

プレーヤー上にマウスホバーが発生したときに発火します。このイベントは、ホバーしている場合は true、していない場合は false を返します。

トラッキング オブジェクト

hapyak.context.tracking.widgetAction(action, properties)

パートナーがカスタムアナリティクスをトラッキングできるようにします。

trackButton.addEventListener( "click", function () {
  hapyak.context.tracking.widgetAction('Follow', {'username': 'foobar123'});
});

• Action: トラッキング対象となるアクションの名前。任意の文字列を指定できます。
• Properties: このアクションに関連付けたいプロパティのオブジェクト。どのプロパティをトラッキングするかは自由ですが、正しい JSON 形式である必要があります。
• 共有モーダルで提供される VideoJS4 埋め込みタイプを使用すると、Viewer オブジェクトにオプションを追加して、以下のように独自のアナリティクスを表示・トラッキングすることができます：

<video id="hapyak-player-157199-8825"  class="video-js vjs-default-skin" width="720" height="405" playsinline="playsinline">
  <source src="https://sample.hapyak-hosted.com/group_uploads/23/16673/videos/862f7e32a9b94974b98f004ae49fa9ef/Sample-Video-with-sound.mp4" type="video/mp4"/>
</video>
<link rel="stylesheet" href="//vjs.zencdn.net/4.8/video-js.css">
<script type="text/javascript" src="//vjs.zencdn.net/4.8/video.js"></script>

<script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak.js"></script>
<script type="text/javascript">
  (function () {
      var vjs = videojs('hapyak-player-157199-8825');

      hapyak.viewer({
          apiKey: "12345678910111213",
          projectId: 286041,
          resetVariables: true,
          player: vjs,
          videoType: "html5",
          playerType: "videojs4",
          autoplay: false,
          oncustomtrackingevent: function(data) {
            console.log("custom Data", data)
          }
      });
  })();
</script>

セッション変数

これらの変数はセッション中にのみ存在します。Extension API を使って変数を設定することは、Viewer に「variables」オブジェクトを渡すのと機能的には同等です。

オブジェクト：hapyak.context.env

メソッド

set(name, value, temp, scope)

hapyak.context.env.set('obj', {name: "Andrew", anotherName: "Homer J Simpson"}, false, 'track');

指定された名前で変数の値を設定します。

• temp: true にすると、値はブラウザのローカルストレージに保存されません。（デフォルト: false）
• scope：他のアノテーションからこのデータを利用可能にするには track に設定します。（デフォルト: annotation scope）
• scope が annotation scope の場合、使用できるデータ型に制限はありません。

上記の例に基づき、変数 obj からデータを取得したい場合、以下のようにテキスト アノテーション内で使用できます：

関数が呼び出された後、変数は次のように解決されます：

get(name)

hapyak.context.env.get('name')

name によって指定された変数の値を返します。

現在のプロジェクト内のアノテーションデータを返すには：

hapyak.context.addEventListener("data", function() { // "data" イベントの発火を待つ
    hapyak.context.env.get('projectAnnotations')
  })

name によって指定された単一の変数の値をクリアします。

注意事項:

env.set を使って設定された変数は、親ウィンドウに通信する必要があるため非同期で変更されます。新しい値は次の "data" イベントが発火するまで env.get では取得できません。このイベントは通常数ミリ秒以内に発生します。

console.log(hapyak.context.env.get('myData')); //foo
  hapyak.context.env.set('myData', 'bar');
  console.log(hapyak.context.env.get('myData')); //foo
  hapyak.context.addEventListener('data', function () {
      console.log(hapyak.context.env.get('myData')); //bar
  });