

サイトにvimeoをiframeで埋め込み  
[player.js](https://github.com/vimeo/player.js)を利用して

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

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

### HTML

[code]

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

### Javascript

[code]

    <script src="https://unpkg.com/dayjs@1.11.3/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.3/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>
    
[/code]

### PHP(Controller(一部抜粋))

[code]

    $table = new WatchedLog();
    $table->time = $request->watchedTime;
    $table->created_at = Carbon::now();
    $table->save();
    
[/code]


CC BY-SA 4.0
2022-09-30T12:39:50.213
91387
2022-10-01T16:11:14.057
2022-10-01T16:11:14.057
53436
53436
question
javascript jquery
vimeo+player.jsでサイトに埋め込みした動画の視聴時間を計測したいが同じデータがいくつも作成されてしまう