[JavaScript]btn.addEventListener('click', togglePlay);でボタンを押して実行できる関数を、ボタンを押さずに自動実行させたいです。

Question

前提・実現したいこと

indexedDBに保存されている動画を読み込むプログラムを、ネット上から参照しています。
https://takahiro-kuyama.github.io/indexed-db-movie/

btn.addEventListener('click', togglePlay);でボタンに登録して実行できる関数があります。
この関数をボタンに登録して実行するのではなく、通常の関数のように実行したいです。
FfmpegMethod()の関数の中でtogglePlay;を実行したいのですが、うまく実行されないようです。

FfmpegMethod()
{
 togglePlay;
}

該当のソースコード

該当部分のみ抜き出しているため、不具合があるかもしれません。

        (function () {
            var version = 1;
            var movie_url = './testaa.avi';
            var btn = document.querySelector('button');
            var video = document.querySelector('#myVideo');
            var db_status = document.querySelector('#db_status');
            var error_status = document.querySelector('#error_status');
            
            var is_video_loaded = false;
            var is_db_updated = false;
            
            var togglePlay = function () {
                if (video.paused) {
                    if (!is_video_loaded) {
                        try{
                            //1.indexedDBを開く
                            //var
                            idbReq = indexedDB.open("/idbfs");
                            //var idbReq = indexedDB.open("test", version);
                            db_status.innerText = "opening indexedDB";
                        } catch (e) {
                            error_status.innerText = "IndexedDB is not implemented";
                            return;
                        }

                        //2.DBの新規作成時、またはバージョン変更時に実行するコード
                        idbReq.onupgradeneeded = function (event) {
                            var db = event.target.result;
                            db_status.innerText = "update database";
                            //過去にDBを作成したことがなければ作成
                            if (event.oldVersion < 1 || (event.oldVersion & 0x7fffffffffffffff) < 1) {
                                console.log("create database");
                                event.target.result.createObjectStore("video", { keyPath: "video_id" });
                                db_status.innerHTML += "<br> database created"
                            }

                            is_db_updated = true;

                            //onupdateneededで呼ばれたtransactionが終了してから処理を行う（既存のtransactionが新規のtransactionをブロックし合う場合がある）
                            event.target.transaction.oncomplete = function () {
                                var xhr = new XMLHttpRequest();
                                xhr.open('GET', movie_url, true);
                                xhr.responseType = 'arraybuffer';
                                //IndexedDBを使用した場合との時間差を明確にするため、XMLHttpRequestのキャッシュを無効化（本来は必要なし）
                                xhr.setRequestHeader('Pragma', 'no-cache');
                                xhr.setRequestHeader('Cache-Control', 'no-cache');
                                xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');

                                xhr.onload = function (e) {
                                    db_status.innerText = "movie is loaded"
                                    try {
                                        var transaction = db.transaction("video", "readwrite");
                                        videoStore = transaction.objectStore("video");
                                        var arraybuffer = e.target.response;
                                        //データの追加
                                        videoStore.put({ video_id: "1", video: arraybuffer });

                                        var blob = new Blob([arraybuffer], { type: 'video/avi' });
                                        var URL = window.URL || window.webkitURL;
                                        video.src = URL.createObjectURL(blob);

                                        db_status.innerText = "db is updated";
                                        console.log("updated indexedDB");
                                    } catch (e) {
                                        error_status.innerText = e.message;
                                    }
                                }
                                xhr.send();
                            }
                        }

                        idbReq.onsuccess = function (event) {
                            if (!is_db_updated) {
                                db_status.innerText = "opened DB";
                                var db = event.target.result;
                                //"video"オブジェクトストアを読みreadonly権限付きで使用することを宣言
                                //var transaction = db.transaction("video", "readonly");
                                var transaction = db.transaction("FILE_DATA", "readonly");
                                //オブジェクトストアの取り出し
                                //var videoStore = transaction.objectStore("video");
                                var videoStore = transaction.objectStore("FILE_DATA");
                                //オブジェクトストアへ取り出しリクエスト
                                //var getReq = videoStore.get("1");

                                //動画のパスを手動で入力する
                                //var input_message = document.getElementById("input_message").value;

                                //var getReq = videoStore.get("/idbfs/c614088e1b6ee14d287bd9060496bc47/testMovie.avi");
                                var getReq = videoStore.get(input_message);

                                //videoオブジェクトストアからのデータの取り出し
                                getReq.onsuccess = function (event) {
                                    try {
                                        //var
                                        //blob = new Blob([event.target.result.video], { type: 'video/avi' });
                                        blob = new Blob([event.target.result.contents], { type: 'video/avi' });
                                        transcodetest();
                                        var URL = window.URL || window.webkitURL;
                                        video.src = window.URL.createObjectURL(blob);
                                        //db_status.innerText = "db is opened, and success data load";
                                    } catch (e) {
                                        error_status.innerText = e.message;
                                    }
                                }
                                getReq.onerror = function (event) {
                                    db_status.innerText = "db is opened, but failed data load"
                                }
                            }
                        }

                        idbReq.onerror = function (event) {
                            db_status.innerText = "failed db open"
                        }

                        is_video_loaded = true;
                    }
                    video.play();
                } else {
                    video.pause();
                }
            };
            btn.addEventListener('click', togglePlay);//ここでボタンに登録したtogglePlayは実行できる
    
        })();

  function FfmpegMethod(parameter) {
    console.log(parameter.callbackMoviePathName)
    input_message = parameter.callbackMoviePathName;
    togglePlay;//この関数を呼ぶようにしても、上手く動かない
    //idbReq.onsuccess;
    // C#から指定されていたGameObject名とメソッド名を使ってコールバック処理を行う
    //unityInstance.SendMessage(parameter.callbackGameObjectName, parameter.callbackFunctionName)
  }

何か参考になるサイトや、私に足りない説明などありましたら教えていただけると助かります。
よろしくお願いします。

Answer 1

btnをクリックすることでtogglePlayが呼び出せるのであれば、

function FfmpegMethod(parameter) {
    btn.click（）;
  }

としたら良いのではないかと思いました。

Comments

[aguroshou0413]

ご回答ありがとうございます。
私が求めていたことが実現できました。
JavaScriptの知識がなかったので、btn.click();でボタンをマウスでクリックしたときと同じ実行をプログラムでできることを分かっていなかったです。
3日ほどずっと悩んでいたので助かります。m(_ _)m

Answer 2

例えばWindow: DOMContentLoaded イベント

Comments

[aguroshou0413]

ご回答ありがとうございます。
只今検証したところ、おそらくページの読み込み完了時にイベントが呼ばれるため、FfmpegMethodの関数の中から呼び出すことがうまくできないようです…。(indexedDBに動画を保存した後にFfmpegMethodの関数を呼ぶため、ページの読み込み完了時にイベントが呼ぶことでは良くないのです…。)
私の方でも他にaddEventListernerの引数で発生するイベントのタイミングをうまく調整できないか確認してみます。

[aguroshou0413]

window.addEventListener('mousemove', togglePlay);
この設定にすると、indexedDBに動画を保存した後にウィンドウ上でマウスを少しでも動かすとFfmpegMethodの関数が呼ばれて、うまく動作します。
ですが、可能であればwindow.addEventListener(''', togglePlay);で関数を登録したときに一度だけ実行するようにしたいです。もしそのようなことが可能でしたら教えていただけると助かります。m(_ _)m

[m.ts10806]

なるほど。要件的に初歩じゃないですね。
(というか初歩とか書かない方がいいです)

[aguroshou0413]

ご指摘ありがとうございます。質問文を直しておきます。