Resumable playback for web
Resumable playback for web
FastPix Web Player lets you resume video playback from the last watched position using the start-time attribute and JavaScript progress tracking.
1. How it works
The page loads the FastPix Player SDK via a script tag. The defer attribute ensures the custom element is registered before any JavaScript runs against it.
2. Setting up the player element
3. Waiting for the custom element
4. Attaching video debug listeners
5. Tracking progress via timeupdate
6. Polling for the video element
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Start Time</title>
7 <!-- Registers the <fastpix-player> custom element -->
8 <script src="https://cdn.jsdelivr.net/npm/@fastpix/fp-player@latest" defer></script>
9</head>
10<body>
11 <!--
12 playback-id: FastPix asset id (replace with yours).
13 start-time: resume offset in seconds (replace placeholder below). Must be a number;
14 non-numeric values are treated as 0. Playback resumes from this second once ready.
15 auto-play / loop: standard demo flags (autoplay may be blocked without muted).
16 -->
17 <fastpix-player
18 id="fp"
19 playback-id="your-playback-id"
20 auto-play
21 loop
22 start-time="your-start-time-seconds"
23 ></fastpix-player>
24
25 <!-- Live progress readout updated from JS -->
26 <p id="t">Progress: —</p>
27
28 <script>
29 customElements.whenDefined("tok-string">'fastpix-player').then(() => {
30 const player = document.getElementById("tok-string">'fp');
31 const out = document.getElementById("tok-string">'t');
32
33 let debugAttached = false;
34
35 function attachVideoDebug(video) {
36 if (debugAttached) return;
37 debugAttached = true;
38
39 video.addEventListener("tok-string">'loadedmetadata', () => {
40 console.log("tok-string">'[start-time] loadedmetadata', {
41 duration: video.duration,
42 currentTime: video.currentTime,
43 videoWidth: video.videoWidth,
44 videoHeight: video.videoHeight,
45 });
46 });
47
48 video.addEventListener("tok-string">'timeupdate', () => {
49 const d = video.duration;
50 const t = video.currentTime;
51 const pct =
52 Number.isFinite(d) && d > 0 ? (t / d) * 100 : null;
53 console.log("tok-string">'[start-time] timeupdate', {
54 currentTime: t,
55 duration: d,
56 progressPercent:
57 pct != null ? Number(pct.toFixed(2)) : null,
58 paused: video.paused,
59 ended: video.ended,
60 });
61 });
62 }
63
64 setInterval(() => {
65 const video = player.video;
66 if (!video) {
67 out.textContent = "tok-string">'Progress: —';
68 return;
69 }
70 attachVideoDebug(video);
71
72 const d = video.duration;
73 if (!Number.isFinite(d) || d <= 0) {
74 out.textContent = "tok-string">'Progress: —';
75 return;
76 }
77
78 const pct = (video.currentTime / d) * 100;
79 out.textContent =
80 "tok-string">'Progress: ' +
81 pct.toFixed(1) +
82 "tok-string">'% (' +
83 video.currentTime.toFixed(1) +
84 "tok-string">' / ' +
85 d.toFixed(1) +
86 "tok-string">' s)';
87 }, 100);
88 });
89 </script>
90</body>
91</html>