kintoneにストリーミング用DASHプレイヤーを実装する

kintoneのレコードにソラカメのストリーミング映像を再生する為、DASHプレイヤーを実装しました。
一先ず、再生するところまで・・・

大まかな手順

• フィールドへの実装
• JavaScript / CSSでカスタマイズ

フィールドへの実装

フォームには２点のフィールドを配置します。

• スペースフィールド：フィールドコード[dash]
• リンクフィールド：フィールドコード[url]

JavaScriptのカスタマイズ

JavaScriptのカスタマイズでは以下の２点を設定します。
dash.jsの実装はCDNを設定しております

• dash.all.min.js(CDN)
  http://cdn.dashjs.org/latest/dash.all.min.js
• test_dash.js

test_dash.js

(function() {
  'use strict';

  const test = function(event) {
    kintone.app.record.getSpaceElement('dash').innerHTML = '<video data-dashjs-player="" autoplay="" width="800" height="600" src=' + url + ' controls="true"> </video>';

      var video,
          player,
          url= event.record.url.value;

      video = document.querySelector('video');
      player = dashjs.MediaPlayer().create();
      player.initialize(video, url, false);

  };

  const eventslist = [
    'app.record.detail.show'
  ];
  kintone.events.on(eventslist, test);
})();

videoタグでリンクフィールドの動画をスペースフィールドに埋め込んであげます。
コツはvideoタグで動画設定後に初期化を行う事ですね。

動画再生

test_dash.jsではリンクフィールドにMPDファイルのURL若しくはダウンロードURLを設定し、レコード詳細画面を表示するとストリーミング動画が再生されます。
今回はDASH.jsのサンプルページのMPDファイルを設定してます。

参考ページ

https://www.gotop.co.jp/kintonesi20211216/
https://github.com/Dash-Industry-Forum/dash.js.git
http://reference.dashif.org/dash.js/latest/samples/