プレイヤーイベントのご利用方法 – ビデオグお客様サポート

プレーヤーイベントはビデオグプレイヤーをお客様ページにiframeで埋め込む場合に、埋め込み先のお客様ページ（以後「埋込ページ」とする）で、分析に役立つ各種イベントを取得できる機能です。

◯目次

注意事項
通知データ
取得できるプレイヤーイベント
サンプル

◯注意事項

プレーヤーイベントはWebMessagingというブラウザの機能により、iframeに操作の通知を行うことで動作します。この仕組みに対応していないブラウザではご利用になれません。

◯通知データ

イベントハンドラに渡されるMessageEventオブジェクトのdata属性には以下のような文字列が渡されます。

signature=videog_player_event&name=timeupdate&value={再生秒数}&hash={ハッシュ}&mymedia_num={動画番号}

署名(signature) : "videog_player_event"
※全プレイヤーイベント共通
イベント名(name) : "timeupdate"
データ(value) : 再生秒数
動画ハッシュ(hash) : 動画固有のハッシュ
動画番号(mymedia_num) : 管理画面上での動画番号

※IE9以下対応のため、通知データはURLにおけるクエリーストリングと同様の文字列で渡しております。
※パラメーターの順番は順不同です。

◯取得できるプレイヤーイベント

・プレイヤー関連

再生秒数
再生開始
シーク
一時停止
再生完了

・動画広告関連

広告再生開始
広告一時停止
広告スキップ
広告再生完了

◯サンプル

・再生秒数

イベント名：timeupdate
データ：動画の再生秒数
※精度はブラウザとFlash Playerの仕様により異なります。
データ形式：数値

コーディング例：

$(window).on('message', function(ev){
  var org_data = ev.originalEvent.data;
  if(typeof(org_data) != "string" || org_data.indexOf("videog_player_event") < 0){
    return; // ビデオグプレーヤーイベント以外は処理しない
  }

  // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
  var ev_strings = org_data.split("&");

  // オブジェクトに変換する
  var ev_data = {};
  for(var i = 0; i < ev_strings.length; i++){
    var parts = ev_strings[i].split("=", 2);
    var label = parts[0];
    var data = decodeURIComponent(parts[1]);
    ev_data[label] = data;
  }

  // 変換したオブジェクトを基に実際の処理を行う
  if(ev_data.name == "timeupdate"){
    //こちらにお好きな処理を記入して下さい
  }
});

・再生開始

イベント名：play
データ：なし
データ形式：なし

コーディング例：

$(window).on('message', function(ev){
  var org_data = ev.originalEvent.data;
  if(typeof(org_data) != "string" || org_data.indexOf("videog_player_event") < 0){
    return; // ビデオグプレーヤーイベント以外は処理しない
  }

  // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
  var ev_strings = org_data.split("&");

  // オブジェクトに変換する
  var ev_data = {};
  for(var i = 0; i < ev_strings.length; i++){
    var parts = ev_strings[i].split("=", 2);
    var label = parts[0];
    var data = decodeURIComponent(parts[1]);
    ev_data[label] = data;
  }

  // 変換したオブジェクトを基に実際の処理を行う
  if(ev_data.name == "play"){
  //こちらにお好きな処理を記入して下さい
  }
});

・シーク

イベント名：seek
データ：なし
データ形式：なし

コーディング例：

$(window).on('message', function(ev){
  var org_data = ev.originalEvent.data;
  if(typeof(org_data) != "string" || org_data.indexOf("videog_player_event") < 0){
    return; // ビデオグプレーヤーイベント以外は処理しない
  }

  // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
  var ev_strings = org_data.split("&");

  // オブジェクトに変換する
  var ev_data = {};
  for(var i = 0; i < ev_strings.length; i++){
    var parts = ev_strings[i].split("=", 2);
    var label = parts[0];
    var data = decodeURIComponent(parts[1]);
    ev_data[label] = data;
  }

  // 変換したオブジェクトを基に実際の処理を行う
  if(ev_data.name == "seek"){
    //こちらにお好きな処理を記入して下さい
  }
});

・一時停止

イベント名：pause
データ：なし
データ形式：なし

コーディング例：

$(window).on('message', function(ev){
  var org_data = ev.originalEvent.data;
  if(typeof(org_data) != "string" || org_data.indexOf("videog_player_event") < 0){
    return; // ビデオグプレーヤーイベント以外は処理しない
  }

  // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
  var ev_strings = org_data.split("&");

  // オブジェクトに変換する
  var ev_data = {};
  for(var i = 0; i < ev_strings.length; i++){
    var parts = ev_strings[i].split("=", 2);
    var label = parts[0];
    var data = decodeURIComponent(parts[1]);
    ev_data[label] = data;
  }

  // 変換したオブジェクトを基に実際の処理を行う
  if(ev_data.name == "pause"){
    //こちらにお好きな処理を記入して下さい
  }
});

・再生完了

イベント名：complete
データ：なし
データ形式：なし

コーディング例：

$(window).on('message', function(ev){
  var org_data = ev.originalEvent.data;
  if(typeof(org_data) != "string" || org_data.indexOf("videog_player_event") < 0){
    return; // ビデオグプレーヤーイベント以外は処理しない
  }

  // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
  var ev_strings = org_data.split("&");

  // オブジェクトに変換する
  var ev_data = {};
  for(var i = 0; i < ev_strings.length; i++){
    var parts = ev_strings[i].split("=", 2);
    var label = parts[0];
    var data = decodeURIComponent(parts[1]);
    ev_data[label] = data;
  }

  // 変換したオブジェクトを基に実際の処理を行う
  if(ev_data.name == "complete"){
    //こちらにお好きな処理を記入して下さい
  }
});

・広告再生開始

イベント名：adplay
データ：なし
データ形式：なし

コーディング例：

$(window).on('message', function(ev){
  var org_data = ev.originalEvent.data;
  if(typeof(org_data) != "string" || org_data.indexOf("videog_player_event") < 0){
    return; // ビデオグプレーヤーイベント以外は処理しない
  }

  // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
  var ev_strings = org_data.split("&");

  // オブジェクトに変換する
  var ev_data = {};
  for(var i = 0; i < ev_strings.length; i++){
    var parts = ev_strings[i].split("=", 2);
    var label = parts[0];
    var data = decodeURIComponent(parts[1]);
    ev_data[label] = data;
  }

  // 変換したオブジェクトを基に実際の処理を行う
  if(ev_data.name == "adplay"){
    //こちらにお好きな処理を記入して下さい
  }
});

・広告一時停止

イベント名：adpause
データ：なし
データ形式：なし

コーディング例：

$(window).on('message', function(ev){
  var org_data = ev.originalEvent.data;
  if(typeof(org_data) != "string" || org_data.indexOf("videog_player_event") < 0){
    return; // ビデオグプレーヤーイベント以外は処理しない
  }

  // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
  var ev_strings = org_data.split("&");

  // オブジェクトに変換する
  var ev_data = {};
  for(var i = 0; i < ev_strings.length; i++){
    var parts = ev_strings[i].split("=", 2);
    var label = parts[0];
    var data = decodeURIComponent(parts[1]);
    ev_data[label] = data;
  }

  // 変換したオブジェクトを基に実際の処理を行う
  if(ev_data.name == "adpause"){
    //こちらにお好きな処理を記入して下さい
  }
});

・広告スキップ

イベント名：adskipped
データ：なし
データ形式：なし

コーディング例：

$(window).on('message', function(ev){
  var org_data = ev.originalEvent.data;
  if(typeof(org_data) != "string" || org_data.indexOf("videog_player_event") < 0){
    return; // ビデオグプレーヤーイベント以外は処理しない
  }

  // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
  var ev_strings = org_data.split("&");

  // オブジェクトに変換する
  var ev_data = {};
  for(var i = 0; i < ev_strings.length; i++){
    var parts = ev_strings[i].split("=", 2);
    var label = parts[0];
    var data = decodeURIComponent(parts[1]);
    ev_data[label] = data;
  }

  // 変換したオブジェクトを基に実際の処理を行う
  if(ev_data.name == "adskipped"){
    //こちらにお好きな処理を記入して下さい
  }
});

・広告再生完了

イベント名：adcomplete
データ：なし
データ形式：なし

コーディング例：

$(window).on('message', function(ev){
  var org_data = ev.originalEvent.data;
  if(typeof(org_data) != "string" || org_data.indexOf("videog_player_event") < 0){
    return; // ビデオグプレーヤーイベント以外は処理しない
  }

  // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
  var ev_strings = org_data.split("&");

  // オブジェクトに変換する
  var ev_data = {};
  for(var i = 0; i < ev_strings.length; i++){
    var parts = ev_strings[i].split("=", 2);
    var label = parts[0];
    var data = decodeURIComponent(parts[1]);
    ev_data[label] = data;
  }

  // 変換したオブジェクトを基に実際の処理を行う
  if(ev_data.name == "adcomplete"){
    //こちらにお好きな処理を記入して下さい
  }
});

このセクションの記事

関連記事