Harden video sync for network playback (gentle drift correction)

ep0/viewer.html

@@ -135,8 +135,9 @@ let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
 playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
-// keep the other cams locked to master when they drift
-master.addEventListener('timeupdate',()=>{videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-master.currentTime)>0.08){try{v.currentTime=master.currentTime;}catch(e){}}});});
+function resyncOthers(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.25){try{v.currentTime=t;}catch(e){}}});}
+master.addEventListener('seeked',resyncOthers);
+setInterval(()=>{if(!master.paused)resyncOthers();},1000);
 
 function frameAt(t){let i=Math.round(t*S.fps);return Math.max(0,Math.min(S.n-1,i));}
 function update(){

ep1/viewer.html

@@ -135,8 +135,9 @@ let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
 playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
-// keep the other cams locked to master when they drift
-master.addEventListener('timeupdate',()=>{videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-master.currentTime)>0.08){try{v.currentTime=master.currentTime;}catch(e){}}});});
+function resyncOthers(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.25){try{v.currentTime=t;}catch(e){}}});}
+master.addEventListener('seeked',resyncOthers);
+setInterval(()=>{if(!master.paused)resyncOthers();},1000);
 
 function frameAt(t){let i=Math.round(t*S.fps);return Math.max(0,Math.min(S.n-1,i));}
 function update(){

ep2/viewer.html

@@ -135,8 +135,9 @@ let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
 playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
-// keep the other cams locked to master when they drift
-master.addEventListener('timeupdate',()=>{videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-master.currentTime)>0.08){try{v.currentTime=master.currentTime;}catch(e){}}});});
+function resyncOthers(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.25){try{v.currentTime=t;}catch(e){}}});}
+master.addEventListener('seeked',resyncOthers);
+setInterval(()=>{if(!master.paused)resyncOthers();},1000);
 
 function frameAt(t){let i=Math.round(t*S.fps);return Math.max(0,Math.min(S.n-1,i));}
 function update(){

ep3/viewer.html

@@ -135,8 +135,9 @@ let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
 playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
-// keep the other cams locked to master when they drift
-master.addEventListener('timeupdate',()=>{videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-master.currentTime)>0.08){try{v.currentTime=master.currentTime;}catch(e){}}});});
+function resyncOthers(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.25){try{v.currentTime=t;}catch(e){}}});}
+master.addEventListener('seeked',resyncOthers);
+setInterval(()=>{if(!master.paused)resyncOthers();},1000);
 
 function frameAt(t){let i=Math.round(t*S.fps);return Math.max(0,Math.min(S.n-1,i));}
 function update(){

ep4/viewer.html

@@ -135,8 +135,9 @@ let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
 playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
-// keep the other cams locked to master when they drift
-master.addEventListener('timeupdate',()=>{videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-master.currentTime)>0.08){try{v.currentTime=master.currentTime;}catch(e){}}});});
+function resyncOthers(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.25){try{v.currentTime=t;}catch(e){}}});}
+master.addEventListener('seeked',resyncOthers);
+setInterval(()=>{if(!master.paused)resyncOthers();},1000);
 
 function frameAt(t){let i=Math.round(t*S.fps);return Math.max(0,Math.min(S.n-1,i));}
 function update(){

ep5/viewer.html

@@ -135,8 +135,9 @@ let playing=false;
 function seekTo(t){videos.forEach(v=>{try{v.currentTime=t;}catch(e){}});}
 playBtn.onclick=()=>{playing=!playing;if(playing){videos.forEach(v=>v.play());playBtn.textContent='❚❚';requestAnimationFrame(loop);}else{videos.forEach(v=>v.pause());playBtn.textContent='▶︎';}};
 seek.oninput=()=>{const t=seek.value/1000*DUR;seekTo(t);update();};
-// keep the other cams locked to master when they drift
-master.addEventListener('timeupdate',()=>{videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-master.currentTime)>0.08){try{v.currentTime=master.currentTime;}catch(e){}}});});
+function resyncOthers(){const t=master.currentTime;videos.forEach(v=>{if(v!==master&&Math.abs(v.currentTime-t)>0.25){try{v.currentTime=t;}catch(e){}}});}
+master.addEventListener('seeked',resyncOthers);
+setInterval(()=>{if(!master.paused)resyncOthers();},1000);
 
 function frameAt(t){let i=Math.round(t*S.fps);return Math.max(0,Math.min(S.n-1,i));}
 function update(){