0

サイトにvimeoをiframeで埋め込み
player.jsを利用して

  1. 再生(イベント発火⇨視聴開始した現在時刻を保存)
  2. 一時停止または動画終了(イベント発火⇨視聴終了した現在時刻を保存)」
  3. [1]と[2]の差分をDBに保存

で視聴時間を登録しているのですが、なぜか同じデータが複数作成されるケースがあります。
ブラウザの問題の可能性も考え
PC:Chrome・Safari
iOS(15.7):Chrome・Safari
で色々操作してみましたが再現されません。
どなたか原因わかる方いないでしょうか。
しばらく調査しているのですが八方塞がり状態なので
お力添えの程よろしくお願いします。

HTML

<iframe src="vimeoの動画url" id="player" frameborder="0"></iframe>

Javascript

<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
<script src="https://unpkg.com/[email protected]/locale/ja.js"></script>
<script>dayjs.locale('ja')</script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
$(function(){
    const player = new Vimeo.Player($("#player"));
    let startOfTime = dayjs();

    player.on('play', function() {
        startOfTime = dayjs();
    });

    player.on('pause', function() {
        const watchedTime = diffTime(dayjs());
        save(watchedTime);
    });

    function diffTime(endOfTime) {
        const diff = endOfTime.diff(startOfTime);
        const second = Math.round(diff / 1000);
        return formatted(second);
    }

    function formatted(time) {
        const hour = Math.floor(time / 3600);
        const minute = Math.floor((time - hour * 3600) / 60);
        const second = Math.floor(time - hour * 3600 - minute * 60);

        // 時:分:秒形式
        let result = "";
        result += hour < 10 ? "0" + hour : hour;
        result += ":";
        result += minute < 10 ? "0" + minute : minute;
        result += ":";
        result += second < 10 ? "0" + second : second;

        return result;
    }

    function save(watchedTime)
    {
        startOfTime = dayjs();

        $.ajax({
            type: 'POST',
            url: '/watchedTime/create',
            data: {
                'watchedTime': watchedTime,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })
    }
})
</script>

PHP(Controller(一部抜粋))

$table = new WatchedLog();
$table->time = $request->watchedTime;
$table->created_at = Carbon::now();
$table->save();
4
  • サーバー側の問題でないことはどのように確認されましたか?
    – mjy
    2022年10月1日 5:19
  • サーバー側では単純にレコードを1件登録する処理しかないためAPIかフロント側に問題があると思いました。また、正常に登録できる場合の方が多く、同一レコードが複数登録されるケースの方が少ないことから、何かしらの操作の条件があると思いました。 2022年10月1日 11:43
  • 気になる点はいくつかあるきがします。まず、そもそも「同じデータ」とはどのようなものでしょうか。たとえば1秒以下のが複数だとか、法則性はありますか?また、当該SDKではイベントの内容(たとえば動画のどこでイベントが発火したか)などが取れるはずですが、クライアント側時刻で取得しているのは何故ですか?あるいは追加でこのイベントのpayloadを収集すればなにか参考になる情報が得られるかもしれません。また、環境起因を疑うならUAなど環境特定に役に立ちそうな情報の収集もすべきかも(必ずしも参考になるとは限りませんが)。
    – hinaloe
    2022年10月1日 17:44
  • 「同じデータ」は全く同じ視聴時間and登録日時のレコードが2レコード以上作成されてしまいます。法則性はなく、2レコード同じの場合もあれば10レコード同じものが作成される場合もあります。クライアント時刻で取得している理由は再生してから一時停止または再生終了するまでの時刻の差分を記録してどれくらいの時間動画の視聴に費やしたかを可視化したかったからです。payloadやUA?は調査してなかったので確認してみます。 2022年10月2日 9:33

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。