アプリ内のvimeo動画の再生ボタンを押した時に発火させる方法

kintone カスタマイズ
1

こんにちは。

特定のアプリ内にvimeo動画を埋め込み、ユーザーが再生ボタンを押した時に「再生日時」「再生動画」「ユーザー名」「再生時間」を取得するアプリを作成したいと考えております。

 

動画を埋め込むところまでは出来たのですが、再生時間など動画情報の取得方法で行き詰まってしまいました。

 

以下、現状のコードです。詳しい方教えていただけませんでしょうか。

よろしくお願い致します。

 

(function () {
"use strict";

// 詳細画面にVimeoをインライン表示させる
kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.detail.show'], function (event) {

  // レコード情報を取得
  var rec = event.record;

  if (rec.url.value === undefined) { return; } // urlフィールドが未定義の場合は終了
  if (rec.url.value.length == 0) { return; } // urlフィールドが空の場合は終了

  var vimeoUrl = rec.url.value; // VimeoのURLを取得
  vimeoUrl = vimeoUrl.replace('http://', 'https://'); // iframe内に表示できるように文字を置換
  vimeoUrl = vimeoUrl.replace('vimeo.com', 'player.vimeo.com/video');

  // Vimeoをインライン表示する div 要素を作成します
  var elVimeo = document.createElement('div');
  elVimeo.setAttribute('id', 'dsp_vimeo');
  elVimeo.setAttribute('name', 'dsp_vimeo');

  // vimeoをインライン表示する div 要素の子要素にiframe要素を作成します
  var elIframe = document.createElement('iframe');
  elIframe.setAttribute('src', vimeoUrl); // VimeoのURLをセット
  elIframe.setAttribute('style', 'width: 640px; height: 360px');
  elIframe.setAttribute('frameborder', '0');
  elIframe.setAttribute('webkitallowfullscreen', '');
  elIframe.setAttribute('mozallowfullscreen', '');
  elIframe.setAttribute('allowfullscreen', '');
  elVimeo.appendChild(elIframe);

  // 「Vimeo」スペース内に elVimeo で設定した要素を追加します
  var el = kintone.app.record.getSpaceElement('vimeo');
  el.appendChild(elVimeo);

  // 「Vimeo」スペースの親要素のサイズを変更します
  var elParent = el.parentNode;
  elParent.setAttribute('style', 'width: 640px; height: 360px');
  });
})();