初心者のFileMaker pro Q&A

みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。

1.ファイルメーカーで解らない事があればここで質問して下さい。 何方でも、ご質問・ご回答お願いします。 (優しく回答しましょう)

ログインしていません。

アナウンス

Claris FileMaker Pro 19 ヘルプ
新しい質問は、新規トピック から投稿して下さい。


#1 2021-06-05 17:07:13

keiko
メンバー

FileMaker proでの動画再生位置について

いつもお世話になっています。
現在、動画を確認しながら、動作の始まり時間と終了時間を記録するデータベースを作成しています。

    動作内容 始まり時間 終了時間
1  動作A       02:00           03:15
2. 動作B.      04:30           05:15
3. 動作C      05:30           06:15
4. 動作D      06:30           07:15

といったフィールドでシンプルなものです。
しかし対象となる動画が一本の長い物で、同じ動画を見ながら記録します。
動画フィールドで前レコードと同じデータを自動入力することで動画は表示できるのですが、それですと毎回動画の頭からの再生になってしまいます。
前回のレコードで進めた位置(上記の例ならレコード2は03:15の位置)から再生をスタートさせたいのですが、不可能でしょうか。
Goですと動画再生の関数があるようですが、機械の関係でproでの運用になってしまいます。

他にリレーションなどで一つの動画を表示する方法があればお手数ですが教えていただけませんか。
よろしくお願い致します。

オフライン

#2 2021-06-06 01:07:08

まか
ゲストユーザー

Re: FileMaker proでの動画再生位置について

再生位置を指定したhtmlをファイルメーカーで記述し、
フィールド内容のエクスポートでhtmlファイルを作成。
urlを開くでブラウザに表示させて確認するのはダメですか?

ブラウザを指定する場合は、urlを開くではなくEventを送信で

#3 2021-06-09 09:38:15

keiko
メンバー

Re: FileMaker proでの動画再生位置について

まかさん、ありがとうございます。
ここ数日、やってみましたが、如何せん知識が足りず、うまく出来ませんでした。
お手数でなければ、もう少しやり方を詳しく教えていただけませんか?
よろしくお願い致します。

オフライン

#4 2021-06-10 13:17:30

まか
ゲストユーザー

Re: FileMaker proでの動画再生位置について

●FileMakerとFileMaker以外の内容を分けて書き込みます。

フィールド内容のエクスポートでフィールド内容をhtmlとして書き出す内容
このhtml内に、JavaScriptのvideo.currentTimeを記入することで動画の指定位置までの移動を行います。
とりあえず、htmlの基本形示しておきます。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>htmlのタイトル</title>
</head>
<body>
    <video id="video" controls onended="location.href='video.html';" onclick="video_play()">
        <source src="video001.mp4" type="video/mp4" />
    </video>
</body>
</html>

上記のvideo.htmlはhtml自体のファイル名を示していて、
動画を最後まで再生させたら、再びvideo.htmlを読み込んで、再生位置を先頭に移動させます。
※ちなみに、このファイル名を別の物に変えると、動画の再生後にhtmlを切り替えることが出来ますが、
FileMakerのレコードの移動とは無関係にhtmlが切り替わるので、動画の整理ではなく、閲覧に使用してみてください。
また、onclick="video_play()"は再生ボタンではなく動画をクリックして再生させるための命令です。

※複数の動画をフォルダvideoにまとめる場合、src="video001.mp4"が
src="video/video001.mp4"になります。

さらにhtmlをフォルダvideoと並列した、フォルダhtmlにまとめる場合は、
src="../video/video001.mp4"になります。

#5 2021-06-10 13:22:25

まか
ゲストユーザー

Re: FileMaker proでの動画再生位置について

●FileMakerのポータルに再生開始位置の数値が登録されている場合の例
ポータルの値を箇条書きにまとめてhtml表示させると、以下のようになります。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>htmlのタイトル</title>
</head>
<body>

    <div class="wrapper">
        <div class="main">
            <video id="video" controls onended="location.href='video001.html';" onclick="video_play()">
                <source src="../video/video001.mp4" type="video/mp4" />
            </video>
        </div>
        <div class="side">
            <ul>
                <li><a id="gochapter0">最初から再生</a></li>
                <li><a id="gochapter1">Chapter1</a></li>
                <li><a id="gochapter2">Chapter2</a></li>
                <li><a id="gochapter3">Chapter3</a></li>
                <li><a id="gochapter4">Chapter4</a></li>
            </ul>
        </div>
    </div>

</body>
</html>

divはhtmlのブロック要素で、wrapperの中に、mainとsideの2つのブロック要素があり、
mainの中にvideo、sideの中に箇条書きが入っています。

ポータルの値から配列を作成する際に、0番目の配列を最初から再生に固定し、
ポータルの1番からn番で以下のテキストを作成します。

<li><a id="gochapter1">Chapter1</a></li>

※先頭からの再生をポータルに加えるとポータルと配列がずれてしまいます。例えば3番目のポータルは配列の2つ目など

それをFileMakerのList関数で以下のようにまとめます。

            <ul>
                <li><a id="gochapter0">最初から再生</a></li>
                <li><a id="gochapter1">Chapter1</a></li>
                <li><a id="gochapter2">Chapter2</a></li>
                <li><a id="gochapter3">Chapter3</a></li>
                <li><a id="gochapter4">Chapter4</a></li>
            </ul>

#6 2021-06-10 13:24:24

まか
ゲストユーザー

Re: FileMaker proでの動画再生位置について

●htmlの見た目の調整について
htmlのheadに下記のstyleを書き込んで、htmlの見た目を調整します。

    <style>
        .wrapper {
            overflow: hidden;
            height: 100%;
        }
        .main {
            float: left;
            margin-right: -200px;
            padding-right: 200px;
            box-sizing: border-box;
            width: 100%;
        }
        .side {
            float: right;
            width: 200px;
            height: 1000px;
            overflow: scroll;
        }
        #video {
            border: 0;
            float: left;
            width: 100%;
            height: auto;
        }
    </style>

・htmlのブロック要素sideの幅を200pxに設定、
・htmlのブロック要素mainの右の外側余白を-200pxに、右の内側余白を200pxに設定。

html全体の表記は

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>htmlのタイトル</title>
    <style>
        .wrapper {
            overflow: hidden;
            height: 100%;
        }
        .main {
            float: left;
            margin-right: -200px;
            padding-right: 200px;
            box-sizing: border-box;
            width: 100%;
        }
        .side {
            float: right;
            width: 200px;
            height: 1000px;
            overflow: scroll;
        }
        #video {
            border: 0;
            float: left;
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="main">
            <video id="video" controls onended="location.href='video001.html';" onclick="video_play()">
                <source src="../video/video001.mp4" type="video/mp4" />
            </video>
        </div>
        <div class="side">
            <ul>
                <li><a id="gochapter0">最初から再生</a></li>
                <li><a id="gochapter1">Chapter1</a></li>
                <li><a id="gochapter2">Chapter2</a></li>
                <li><a id="gochapter3">Chapter3</a></li>
                <li><a id="gochapter4">Chapter4</a></li>
            </ul>
        </div>
    </div>

</body>
</html>

#7 2021-06-10 13:25:40

まか
ゲストユーザー

Re: FileMaker proでの動画再生位置について

●FileMakerのポータルから、htmlのscriptに使用する配列の見本

var arrayVC = [0, 13, 25, 35, 40];
※マーカー部分がポータルの要素

●FileMakerのポータルで作成する関数の見本

var gochapter = document.getElementById('gochapter1');
gochapter.addEventListener('click', function() {
playChapter(arrayVC[1]);
});
※マーカー部分がポータルの要素

●ポータルの値を集計して作成したscriptの見本
※配列の後に基本の関数を記し、それを使いまわしています。
gochapter0は再生の先頭に使用

    <script>
        var arrayVC = [0, 13, 25, 35, 40];

        function playChapter(playpoint) {
            video.currentTime = playpoint;
        };

         var gochapter = document.getElementById('gochapter0');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[0]);
        });

       var gochapter = document.getElementById('gochapter1');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[1]);
        });

        var gochapter = document.getElementById('gochapter2');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[2]);
        });

        var gochapter = document.getElementById('gochapter3');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[3]);
        });

        var gochapter = document.getElementById('gochapter4');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[4]);
        });
    </script>

●html全体の見本

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>htmlのタイトル</title>
    <style>
        .wrapper {
            overflow: hidden;
            height: 100%;
        }
        .main {
            float: left;
            margin-right: -200px;
            padding-right: 200px;
            box-sizing: border-box;
            width: 100%;
        }
        .side {
            float: right;
            width: 200px;
            height: 1000px;
            overflow: scroll;
        }
        #video {
            border: 0;
            float: left;
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="main">
            <video id="video" controls onended="location.href='video001.html';" onclick="video_play()">
                <source src="../video/video001.mp4" type="video/mp4" />
            </video>
        </div>
        <div class="side">
            <ul>
                <li><a id="gochapter0">最初から再生</a></li>
                <li><a id="gochapter1">Chapter1</a></li>
                <li><a id="gochapter2">Chapter2</a></li>
                <li><a id="gochapter3">Chapter3</a></li>
                <li><a id="gochapter4">Chapter4</a></li>
            </ul>
        </div>
    </div>

    <script>
        var arrayVC = [0, 13, 25, 35, 40];

        function playChapter(playpoint) {
            video.currentTime = playpoint;
        };

        var gochapter = document.getElementById('gochapter0');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[0]);
        });

       var gochapter = document.getElementById('gochapter1');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[1]);
        });

        var gochapter = document.getElementById('gochapter2');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[2]);
        });

        var gochapter = document.getElementById('gochapter3');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[3]);
        });

        var gochapter = document.getElementById('gochapter4');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[4]);
        });
    </script>
</body>
</html>

#8 2021-06-10 13:26:42

まか
ゲストユーザー

Re: FileMaker proでの動画再生位置について

●おまけ要素
videoタグにposterを追加すると、動画を再生する前の初期画面を指定できます。
3つのフォルダ、html、video、posterを並列して作成した場合、
htmlから見たposterの表記は、../poster/video001.jpgになります。

●html全体の表記

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>htmlのタイトル</title>
    <style>
        .wrapper {
            overflow: hidden;
            height: 100%;
        }
        .main {
            float: left;
            margin-right: -200px;
            padding-right: 200px;
            box-sizing: border-box;
            width: 100%;
        }
        .side {
            float: right;
            width: 200px;
            height: 1000px;
            overflow: scroll;
        }
        #video {
            border: 0;
            float: left;
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="main">
            <video id="video" controls  poster="../poster/video001.jpg" onended="location.href='video001.html';" onclick="video_play()">
                <source src="../video/video001.mp4" type="video/mp4" />
            </video>
        </div>
        <div class="side">
            <ul>
                <li><a id="gochapter0">最初から再生</a></li>
                <li><a id="gochapter1">Chapter1</a></li>
                <li><a id="gochapter2">Chapter2</a></li>
                <li><a id="gochapter3">Chapter3</a></li>
                <li><a id="gochapter4">Chapter4</a></li>
            </ul>
        </div>
    </div>

    <script>
        var arrayVC = [0, 13, 25, 35, 40];

        function playChapter(playpoint) {
            video.currentTime = playpoint;
        };

         var gochapter = document.getElementById('gochapter0');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[0]);
        });

       var gochapter = document.getElementById('gochapter1');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[1]);
        });

        var gochapter = document.getElementById('gochapter2');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[2]);
        });

        var gochapter = document.getElementById('gochapter3');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[3]);
        });

        var gochapter = document.getElementById('gochapter4');
        gochapter.addEventListener('click', function() {
            playChapter(arrayVC[4]);
        });
    </script>
</body>

</html>

#9 2021-06-10 13:29:03

まか
ゲストユーザー

Re: FileMaker proでの動画再生位置について

●おまけ要素2 ※チャプターの編集・確認の他に、閲覧用htmlを作成する場合
下記の1行を追加すると、チャプターに移動した直後に再生を開始します。

function playChapter(playpoint) {
    video.currentTime = playpoint;
    video.play();
};

#10 2021-06-10 13:32:41

まか
ゲストユーザー

Re: FileMaker proでの動画再生位置について

●htmlのルートパスを取得するためのスクリプトステップ

  • フォルダパスを取得

  • フィールド設定

  • レコード/検索条件確定

例)
フォルダパスを取得の変数に$フォルダパスを指定
フォルダパスを取得のデフォルトの場所にGet ( デスクトップパス )を指定
フィールド設定の計算結果に$フォルダパスを指定

●フィールドhtmlの内容をhtmlファイルとして書き出すスクリプトステップ

  • 変数を設定

  • フィールド内容のエクスポート

  • Webビューアの設定 ※Webビューアを使用する場合

例)
変数を設定 $htmlパス ルートパス & フォルダhtml & ファイル名video001.html
フィールド内容のエクスポートの出力パスに変数$htmlパスを指定
Webビューアの設定 再読み込み

●WebビューアのWebアドレス
"file:/" & ルートパス & フォルダhtml & ファイル名video001.html


●URLを開くの代わりにEventを送信を使ってブラウザを指定する方法

例)
Quote ( "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" ) & " " & $URLのパス
Quote ( "C:\Program Files (x86)\Internet Explorer\iexplore.exe" ) & " " & $URLのパス

●URLの表記のまとめ ※DドライブのVideoData内のhtmlにあるvideo001.htmlの場合
フィールド内容のエクスポート → /D:/VideoData/html/video001.html
WebビューアのWebアドレス → file://D:/VideoData/html/video001.html
URLを開くもしくはEventを送信 → file:///D:/VideoData/html/video001.html

#11 2021-06-11 11:48:30

keiko
メンバー

Re: FileMaker proでの動画再生位置について

まかさん、色々とありがとうございます。
再度、トライします。
取り急ぎ、お礼を申し上げます。

オフライン

#12 2021-06-11 13:22:24

qb_dp
メンバー

Re: FileMaker proでの動画再生位置について

HTMLがフィールドにあるなら、WEBビューアの設定に

"data:text/html;charset=utf-8," & フィールド名

とすれば、表示できます。
※動画ファイルのパスはフルパスで記述。

オフライン

クィック投稿

メッセージを書いて送信してください。
登録の確認

実在の人物による登録であることを確認します。

Board footer