Auto-start synced playback once videos are ready (muted autoplay, falls back to paused if blocked)

egoSample/demo02/viewer.html

@@ -278,4 +278,31 @@ if(master){master.addEventListener('loadedmetadata',update);master.addEventListe
 // keep orbit responsive even when paused
 setInterval(()=>{if((hSt.dirty||dSt.dirty)&&master){hSt.dirty=dSt.dirty=false;const t=master.currentTime;drawHand(idxAt(HANDS.t,t));drawHead(idxAt(HEAD.t,t));}},60);
 window.addEventListener('load',update);update();
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return Object.values(videos);}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.innerHTML='❙❙'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.innerHTML='▶';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

egoSample/demo05/viewer.html

@@ -278,4 +278,31 @@ if(master){master.addEventListener('loadedmetadata',update);master.addEventListe
 // keep orbit responsive even when paused
 setInterval(()=>{if((hSt.dirty||dSt.dirty)&&master){hSt.dirty=dSt.dirty=false;const t=master.currentTime;drawHand(idxAt(HANDS.t,t));drawHead(idxAt(HEAD.t,t));}},60);
 window.addEventListener('load',update);update();
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return Object.values(videos);}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.innerHTML='❙❙'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.innerHTML='▶';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

egoSample/demo07/viewer.html

@@ -278,4 +278,31 @@ if(master){master.addEventListener('loadedmetadata',update);master.addEventListe
 // keep orbit responsive even when paused
 setInterval(()=>{if((hSt.dirty||dSt.dirty)&&master){hSt.dirty=dSt.dirty=false;const t=master.currentTime;drawHand(idxAt(HANDS.t,t));drawHead(idxAt(HEAD.t,t));}},60);
 window.addEventListener('load',update);update();
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return Object.values(videos);}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.innerHTML='❙❙'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.innerHTML='▶';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

egoSample/demo08/viewer.html

@@ -278,4 +278,31 @@ if(master){master.addEventListener('loadedmetadata',update);master.addEventListe
 // keep orbit responsive even when paused
 setInterval(()=>{if((hSt.dirty||dSt.dirty)&&master){hSt.dirty=dSt.dirty=false;const t=master.currentTime;drawHand(idxAt(HANDS.t,t));drawHead(idxAt(HEAD.t,t));}},60);
 window.addEventListener('load',update);update();
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return Object.values(videos);}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.innerHTML='❙❙'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.innerHTML='▶';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

egoSample/demo09/viewer.html

@@ -278,4 +278,31 @@ if(master){master.addEventListener('loadedmetadata',update);master.addEventListe
 // keep orbit responsive even when paused
 setInterval(()=>{if((hSt.dirty||dSt.dirty)&&master){hSt.dirty=dSt.dirty=false;const t=master.currentTime;drawHand(idxAt(HANDS.t,t));drawHead(idxAt(HEAD.t,t));}},60);
 window.addEventListener('load',update);update();
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return Object.values(videos);}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.innerHTML='❙❙'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.innerHTML='▶';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

egoSample/demo10/viewer.html

@@ -278,4 +278,31 @@ if(master){master.addEventListener('loadedmetadata',update);master.addEventListe
 // keep orbit responsive even when paused
 setInterval(()=>{if((hSt.dirty||dSt.dirty)&&master){hSt.dirty=dSt.dirty=false;const t=master.currentTime;drawHand(idxAt(HANDS.t,t));drawHead(idxAt(HEAD.t,t));}},60);
 window.addEventListener('load',update);update();
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return Object.values(videos);}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.innerHTML='❙❙'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.innerHTML='▶';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

ep0/viewer.html

@@ -50,7 +50,7 @@ canvas{width:100%;display:block;cursor:pointer}
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
   <h1>Pick up the water bottle and put it in the basket</h1>
-  <div class="sub"><code>Futurist</code> · episode 0 · 18.2s · 545 frames @ 30fps · teleop</div>
+  <div class="sub"><code>a2</code> · episode 0 · 18.2s · 545 frames @ 30fps · teleop</div>
 </header>
 <div class="layout">
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
@@ -230,4 +230,31 @@ window.addEventListener('resize',()=>update());
 master.addEventListener('loadedmetadata',update);
 master.addEventListener('seeked',update);
 window.addEventListener('load',update);
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return videos;}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

ep1/viewer.html

@@ -50,7 +50,7 @@ canvas{width:100%;display:block;cursor:pointer}
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
   <h1>Pick up the water bottle and put it in the basket</h1>
-  <div class="sub"><code>Futurist</code> · episode 1 · 18.8s · 563 frames @ 30fps · teleop</div>
+  <div class="sub"><code>a2</code> · episode 1 · 18.8s · 563 frames @ 30fps · teleop</div>
 </header>
 <div class="layout">
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
@@ -230,4 +230,31 @@ window.addEventListener('resize',()=>update());
 master.addEventListener('loadedmetadata',update);
 master.addEventListener('seeked',update);
 window.addEventListener('load',update);
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return videos;}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

ep2/viewer.html

@@ -50,7 +50,7 @@ canvas{width:100%;display:block;cursor:pointer}
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
   <h1>Pick up the water bottle and put it in the basket</h1>
-  <div class="sub"><code>Futurist</code> · episode 2 · 18.7s · 562 frames @ 30fps · teleop</div>
+  <div class="sub"><code>a2</code> · episode 2 · 18.7s · 562 frames @ 30fps · teleop</div>
 </header>
 <div class="layout">
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
@@ -230,4 +230,31 @@ window.addEventListener('resize',()=>update());
 master.addEventListener('loadedmetadata',update);
 master.addEventListener('seeked',update);
 window.addEventListener('load',update);
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return videos;}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

ep3/viewer.html

@@ -50,7 +50,7 @@ canvas{width:100%;display:block;cursor:pointer}
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
   <h1>Pick up the water bottle and put it in the basket</h1>
-  <div class="sub"><code>Futurist</code> · episode 3 · 20.5s · 614 frames @ 30fps · teleop</div>
+  <div class="sub"><code>a2</code> · episode 3 · 20.5s · 614 frames @ 30fps · teleop</div>
 </header>
 <div class="layout">
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
@@ -230,4 +230,31 @@ window.addEventListener('resize',()=>update());
 master.addEventListener('loadedmetadata',update);
 master.addEventListener('seeked',update);
 window.addEventListener('load',update);
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return videos;}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>

ep4/view.html

@@ -50,7 +50,7 @@ canvas{width:100%;display:block;cursor:pointer}
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
   <h1>Pick up the water bottle and put it in the basket</h1>
-  <div class="sub"><code>Futurist</code> · episode 4 · 22.4s · 673 frames @ 30fps · teleop</div>
+  <div class="sub"><code>a2</code> · episode 4 · 22.4s · 673 frames @ 30fps · teleop</div>
 </header>
 <div class="layout">
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
@@ -230,5 +230,32 @@ window.addEventListener('resize',()=>update());
 master.addEventListener('loadedmetadata',update);
 master.addEventListener('seeked',update);
 window.addEventListener('load',update);
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return videos;}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>
 <!-- rev2 regular-file -->

ep5/viewer.html

@@ -50,7 +50,7 @@ canvas{width:100%;display:block;cursor:pointer}
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
   <h1>Pick up the water bottle and put it in the basket</h1>
-  <div class="sub"><code>Futurist</code> · episode 5 · 18.4s · 553 frames @ 30fps · teleop</div>
+  <div class="sub"><code>a2</code> · episode 5 · 18.4s · 553 frames @ 30fps · teleop</div>
 </header>
 <div class="layout">
   <div class="panel"><div class="camgrid" id="camgrid"></div></div>
@@ -230,4 +230,31 @@ window.addEventListener('resize',()=>update());
 master.addEventListener('loadedmetadata',update);
 master.addEventListener('seeked',update);
 window.addEventListener('load',update);
+
+/* auto-start playback: first-time visitors shouldn't have to find the play
+   button. Videos are muted, which is what browser autoplay policies require;
+   if a browser still refuses, we roll back to the paused state so the manual
+   button keeps working exactly as before. */
+(function(){
+  var started=false, iv=null;
+  function vlist(){try{return videos;}catch(e){return [];}}
+  function autoStart(){
+    if(started||playing)return;
+    var vs=vlist();
+    if(!vs.length||!vs.every(function(v){return v.readyState>=2;}))return;
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    Promise.all(vs.map(function(v){return Promise.resolve(v.play());})).then(function(){
+      playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop);
+    }).catch(function(){
+      vs.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e';
+    });
+  }
+  vlist().forEach(function(v){
+    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
+  });
+  window.addEventListener('load',autoStart);
+  iv=setInterval(autoStart,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+})();
 </script></body></html>