イベントサンプルのご紹介 – ビデオグお客様サポート

ビデオグのイベントサンプルにつきまして、次の順にご紹介致します。

【プレイヤーイベント】

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

【動画広告イベント】

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

プレイヤーイベントの概要とご利用方法はこちらをご覧ください。
・プレイヤーイベントのご利用方法

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

【プレイヤーイベント】

◯ 再生秒数

イベント名：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"){
    //こちらにお好きな処理を記入して下さい
  }
});

このセクションの記事

関連記事