kintone_videoplay.js

const FILE_FIELD_CODE = "VideoFile";    // 添付ファイルのフィールドコード名(1つ目のファイルだけ)
const PLAY_FIELD_CODE = "video_area";   // 動画再生するスペースのフィールドコード名

(function(){
	"use strict";

	// 詳細画面を表示する時
	kintone.events.on('app.record.detail.show', function(event){

        // 添付ファイルのファイルキーを取得(一番最初のファイルのみ)
        var record = event.record;
        var filekey = record[FILE_FIELD_CODE]['value'][0].fileKey;

        // VIDEOタグに直接URLを挿入すると認証エラーになるので、ajax(XMLHttpRequest)を使ってGETを行う
        var apiurl = '/k/v1/file.json?fileKey=' + filekey;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', apiurl, true);
        xhr.setRequestHeader('X-Requested-With' , 'XMLHttpRequest');    //これが無いとIE,FFがNG
        xhr.responseType = "blob";

        // レスポンスが返ってきたら、表示する
        xhr.onload = function() {
            
            //blobから動的URL生成
            var blob = xhr.response;
            var url = window.URL || window.webkitURL;
            var blob_url = url.createObjectURL(blob);

            // kintoneのスペース要素を取得
            var elvideo = kintone.app.record.getSpaceElement('video_area');

            // <video>を生成
            var video = document.createElement("video");
            video.src = blob_url;
            video.controls = true;
            video.autoplay = true;

            // 画面に表示する
            elvideo.appendChild(video);

        }
        // サーバにリクエストを送る
        xhr.send();
        
        return event;
    });
})();