プレーヤーイベントはビデオグプレイヤーをお客様ページに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"){ //こちらにお好きな処理を記入して下さい } });