0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

大まかな手順

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

フィールドへの実装

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

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

dash1.jpg

JavaScriptのカスタマイズ

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

dash2.jpg

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ファイルを設定してます。

dash3.jpg

参考ページ

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?