RecipesCapture watch progress
Capture watch progress
Persist viewer progress so they can resume where they left off.
A common use case is letting viewers pick up where they left off. Pair
the timeupdate event with localStorage (or your own backend) to
persist the playback position.
Persist on a steady cadence
const STORAGE_KEY = "moviie:progress:" + VIDEO_ID
let lastPersisted = 0
window.Moviie.on("timeupdate", ({ currentTime }) => {
// Throttle to once per second to avoid storage churn.
if (currentTime - lastPersisted < 1) return
lastPersisted = currentTime
localStorage.setItem(STORAGE_KEY, String(currentTime))
})
window.Moviie.on("ended", () => {
localStorage.removeItem(STORAGE_KEY)
})Resume on the next visit
const stored = localStorage.getItem("moviie:progress:" + VIDEO_ID)
if (stored) {
window.Moviie.once("ready", () => {
window.Moviie.seek(Number(stored))
})
}Forwarding to your backend
If you store progress server-side instead, batch network requests:
let timer
window.Moviie.on("timeupdate", ({ currentTime }) => {
clearTimeout(timer)
timer = setTimeout(() => {
fetch("/api/progress", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ videoId: VIDEO_ID, currentTime }),
keepalive: true,
})
}, 5000)
})keepalive: true lets the request finish even if the user navigates
away mid-flight.