サイトにvimeoをiframeで埋め込み
player.jsを利用して
- 再生(イベント発火⇨視聴開始した現在時刻を保存)
- 一時停止または動画終了(イベント発火⇨視聴終了した現在時刻を保存)」
- [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();