teleopSample viewers: WeChat-safe autoplay (top-frame WeixinJSBridge, no readyState deadlock, tap retry)

Same fix as the egoSample viewers: in-app WebViews never reach readyState>=2
before play(), and WeixinJSBridge only exists in the top frame. Covers the
task episode pages, epN viewers, lib/viewer.js (faberU viewers) and clip.html.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

teleopSample/clip.html

@@ -26,6 +26,51 @@ document.getElementById('dl').href = v;
 document.getElementById('dl').setAttribute('download', (t || 'clip').replace(/[^\w.-]+/g, '_') + '.mp4');
 document.getElementById('name').textContent = t;
 document.title = t || 'clip';
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+  }
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
+  }
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+}
+{ const vv = document.getElementById('v');
+  wxAuto(() => [vv], () => !vv.paused, () => vv.play(), () => vv.pause()); }
 document.getElementById('back').onclick = e => {
   e.preventDefault();
   if (back) location.href = back;

teleopSample/drink_ep0.html

@@ -226,17 +226,51 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
   const a=document.createElement('a'); a.className='file-chip'; a.href=href; a.innerHTML=lbl; fm.appendChild(a); });
 
 // ---- autoplay (muted) + loop
-(function(){
-  let started=false, iv=setInterval(tryStart,400);
-  function tryStart(){
-    if(started||playing) return;
-    if(!vids.length||!vids.every(v=>v.readyState>=2)) return;
-    started=true; clearInterval(iv);
-    vids.forEach(v=>v.muted=true); setPlaying(true);
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+  }
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
   }
-  vids.forEach(v=>{ v.addEventListener('canplay',tryStart); v.addEventListener('loadeddata',tryStart); });
-  window.addEventListener('load',tryStart);
-  setTimeout(()=>clearInterval(iv),90000);
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+}
+(function(){
+  wxAuto(()=>vids, ()=>playing, ()=>{ setPlaying(true); return master.play(); }, ()=>setPlaying(false));
   setInterval(()=>{ if(playing&&master&&master.currentTime>=DUR-0.08){
     try{master.currentTime=0;}catch(e){} syncSlaves(0,true);
     if(playing) vids.forEach(v=>v.play().catch(()=>{})); }},200);

teleopSample/drink_ep1.html

@@ -226,17 +226,51 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
   const a=document.createElement('a'); a.className='file-chip'; a.href=href; a.innerHTML=lbl; fm.appendChild(a); });
 
 // ---- autoplay (muted) + loop
-(function(){
-  let started=false, iv=setInterval(tryStart,400);
-  function tryStart(){
-    if(started||playing) return;
-    if(!vids.length||!vids.every(v=>v.readyState>=2)) return;
-    started=true; clearInterval(iv);
-    vids.forEach(v=>v.muted=true); setPlaying(true);
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+  }
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
   }
-  vids.forEach(v=>{ v.addEventListener('canplay',tryStart); v.addEventListener('loadeddata',tryStart); });
-  window.addEventListener('load',tryStart);
-  setTimeout(()=>clearInterval(iv),90000);
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+}
+(function(){
+  wxAuto(()=>vids, ()=>playing, ()=>{ setPlaying(true); return master.play(); }, ()=>setPlaying(false));
   setInterval(()=>{ if(playing&&master&&master.currentTime>=DUR-0.08){
     try{master.currentTime=0;}catch(e){} syncSlaves(0,true);
     if(playing) vids.forEach(v=>v.play().catch(()=>{})); }},200);

teleopSample/ep0/viewer.html

@@ -380,28 +380,53 @@ window.addEventListener('load',update);
    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;
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);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';
-    });
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
   }
-  vlist().forEach(function(v){
-    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
-  });
-  window.addEventListener('load',autoStart);
-  iv=setInterval(autoStart,400);
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
+  }
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
   setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
-})();
+}
+wxAuto(function(){try{return videos;}catch(e){return [];}}, function(){return playing;},
+  function(){ return Promise.all(videos.map(function(v){return Promise.resolve(v.play());})).then(function(){
+    playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop); }); },
+  function(){ videos.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e'; });
 
 /* demo loop: when the clip ends, wrap every video back to the start and keep playing.
    ended is the primary trigger; the interval is a fallback for decoders that never fire it. */

teleopSample/ep1/viewer.html

@@ -380,28 +380,53 @@ window.addEventListener('load',update);
    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;
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);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';
-    });
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
   }
-  vlist().forEach(function(v){
-    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
-  });
-  window.addEventListener('load',autoStart);
-  iv=setInterval(autoStart,400);
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
+  }
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
   setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
-})();
+}
+wxAuto(function(){try{return videos;}catch(e){return [];}}, function(){return playing;},
+  function(){ return Promise.all(videos.map(function(v){return Promise.resolve(v.play());})).then(function(){
+    playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop); }); },
+  function(){ videos.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e'; });
 
 /* demo loop: when the clip ends, wrap every video back to the start and keep playing.
    ended is the primary trigger; the interval is a fallback for decoders that never fire it. */

teleopSample/ep2/viewer.html

@@ -380,28 +380,53 @@ window.addEventListener('load',update);
    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;
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);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';
-    });
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
   }
-  vlist().forEach(function(v){
-    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
-  });
-  window.addEventListener('load',autoStart);
-  iv=setInterval(autoStart,400);
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
+  }
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
   setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
-})();
+}
+wxAuto(function(){try{return videos;}catch(e){return [];}}, function(){return playing;},
+  function(){ return Promise.all(videos.map(function(v){return Promise.resolve(v.play());})).then(function(){
+    playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop); }); },
+  function(){ videos.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e'; });
 
 /* demo loop: when the clip ends, wrap every video back to the start and keep playing.
    ended is the primary trigger; the interval is a fallback for decoders that never fire it. */

teleopSample/ep3/viewer.html

@@ -380,28 +380,53 @@ window.addEventListener('load',update);
    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;
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);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';
-    });
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
   }
-  vlist().forEach(function(v){
-    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
-  });
-  window.addEventListener('load',autoStart);
-  iv=setInterval(autoStart,400);
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
+  }
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
   setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
-})();
+}
+wxAuto(function(){try{return videos;}catch(e){return [];}}, function(){return playing;},
+  function(){ return Promise.all(videos.map(function(v){return Promise.resolve(v.play());})).then(function(){
+    playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop); }); },
+  function(){ videos.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e'; });
 
 /* demo loop: when the clip ends, wrap every video back to the start and keep playing.
    ended is the primary trigger; the interval is a fallback for decoders that never fire it. */

teleopSample/ep4/viewer.html

@@ -380,28 +380,53 @@ window.addEventListener('load',update);
    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;
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);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';
-    });
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
   }
-  vlist().forEach(function(v){
-    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
-  });
-  window.addEventListener('load',autoStart);
-  iv=setInterval(autoStart,400);
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
+  }
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
   setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
-})();
+}
+wxAuto(function(){try{return videos;}catch(e){return [];}}, function(){return playing;},
+  function(){ return Promise.all(videos.map(function(v){return Promise.resolve(v.play());})).then(function(){
+    playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop); }); },
+  function(){ videos.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e'; });
 
 /* demo loop: when the clip ends, wrap every video back to the start and keep playing.
    ended is the primary trigger; the interval is a fallback for decoders that never fire it. */

teleopSample/ep5/viewer.html

@@ -380,28 +380,53 @@ window.addEventListener('load',update);
    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;
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);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';
-    });
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
   }
-  vlist().forEach(function(v){
-    v.addEventListener('canplay',autoStart); v.addEventListener('loadeddata',autoStart);
-  });
-  window.addEventListener('load',autoStart);
-  iv=setInterval(autoStart,400);
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
+  }
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
   setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
-})();
+}
+wxAuto(function(){try{return videos;}catch(e){return [];}}, function(){return playing;},
+  function(){ return Promise.all(videos.map(function(v){return Promise.resolve(v.play());})).then(function(){
+    playing=true; playBtn.textContent='\u275a\u275a'; requestAnimationFrame(loop); }); },
+  function(){ videos.forEach(function(v){try{v.pause();}catch(e){}}); playing=false; playBtn.textContent='\u25b6\ufe0e'; });
 
 /* demo loop: when the clip ends, wrap every video back to the start and keep playing.
    ended is the primary trigger; the interval is a fallback for decoders that never fire it. */

teleopSample/faberU/t2_water_bottle_into_steel_tray/20260707052527/viewer.html

@@ -72,5 +72,5 @@
 <script id="cams" type="application/json">[{"key":"hand_left_color","label":"wrist \u00b7 left","src":"video/hand_left_color.mp4","size":"341.1 KB"},{"key":"head_color","label":"head \u00b7 color","src":"video/head_color.mp4","size":"559.3 KB"},{"key":"hand_right_color","label":"wrist \u00b7 right","src":"video/hand_right_color.mp4","size":"1.3 MB"},{"key":"head_stereo_left","label":"head \u00b7 stereo L","src":"video/head_stereo_left.mp4","size":"475.8 KB"},{"key":"head_depth","label":"head \u00b7 depth","src":"video/head_depth.mp4","size":"2.3 MB"},{"key":"head_stereo_right","label":"head \u00b7 stereo R","src":"video/head_stereo_right.mp4","size":"479.9 KB"}]</script>
 <script id="task" type="application/json">{"instruction":"Pick up the clear plastic water bottle from the retail checkout counter and set it upright in the white plastic tray.","object":"clear plastic water bottle (red label with QR code)","target":"white plastic tray","scene":"retail store checkout counter, shelves of household goods behind"}</script>
 <script src="../../../lib/steps-ui.js"></script>
-<script src="../../../lib/viewer.js"></script>
+<script src="../../../lib/viewer.js?v=wx2"></script>
 </body></html>

teleopSample/faberU/t2_water_bottle_into_steel_tray/20260707052609/viewer.html

@@ -72,5 +72,5 @@
 <script id="cams" type="application/json">[{"key":"hand_left_color","label":"wrist \u00b7 left","src":"video/hand_left_color.mp4","size":"359.3 KB"},{"key":"head_color","label":"head \u00b7 color","src":"video/head_color.mp4","size":"557.4 KB"},{"key":"hand_right_color","label":"wrist \u00b7 right","src":"video/hand_right_color.mp4","size":"1.3 MB"},{"key":"head_stereo_left","label":"head \u00b7 stereo L","src":"video/head_stereo_left.mp4","size":"443.5 KB"},{"key":"head_depth","label":"head \u00b7 depth","src":"video/head_depth.mp4","size":"2.6 MB"},{"key":"head_stereo_right","label":"head \u00b7 stereo R","src":"video/head_stereo_right.mp4","size":"459.0 KB"}]</script>
 <script id="task" type="application/json">{"instruction":"Pick up the clear plastic water bottle from the retail checkout counter and set it upright in the white plastic tray.","object":"clear plastic water bottle (red label with QR code)","target":"white plastic tray","scene":"retail store checkout counter, shelves of household goods behind"}</script>
 <script src="../../../lib/steps-ui.js"></script>
-<script src="../../../lib/viewer.js"></script>
+<script src="../../../lib/viewer.js?v=wx2"></script>
 </body></html>

teleopSample/faberU/t3_juice_bottle_onto_plate/20260724050737/viewer.html

@@ -72,5 +72,5 @@
 <script id="cams" type="application/json">[{"key":"hand_left_color","label":"wrist \u00b7 left","src":"video/hand_left_color.mp4","size":"1.5 MB"},{"key":"head_color","label":"head \u00b7 color","src":"video/head_color.mp4","size":"509.3 KB"},{"key":"hand_right_color","label":"wrist \u00b7 right","src":"video/hand_right_color.mp4","size":"274.3 KB"},{"key":"head_stereo_left","label":"head \u00b7 stereo L","src":"video/head_stereo_left.mp4","size":"483.9 KB"},{"key":"head_depth","label":"head \u00b7 depth","src":"video/head_depth.mp4","size":"2.0 MB"},{"key":"head_stereo_right","label":"head \u00b7 stereo R","src":"video/head_stereo_right.mp4","size":"449.9 KB"}]</script>
 <script id="task" type="application/json">{"instruction":"Pick up the CapriSun juice bottle from the yellow table and stand it upright on the blue-and-white patterned plate.","object":"CapriSun juice bottle (green/blue label, orange cap)","target":"blue-and-white patterned plate","scene":"lab bay behind acoustic screens, yellow table"}</script>
 <script src="../../../lib/steps-ui.js"></script>
-<script src="../../../lib/viewer.js"></script>
+<script src="../../../lib/viewer.js?v=wx2"></script>
 </body></html>

teleopSample/faberU/t3_juice_bottle_onto_plate/20260724050827/viewer.html

@@ -72,5 +72,5 @@
 <script id="cams" type="application/json">[{"key":"hand_left_color","label":"wrist \u00b7 left","src":"video/hand_left_color.mp4","size":"1.5 MB"},{"key":"head_color","label":"head \u00b7 color","src":"video/head_color.mp4","size":"501.9 KB"},{"key":"hand_right_color","label":"wrist \u00b7 right","src":"video/hand_right_color.mp4","size":"315.9 KB"},{"key":"head_stereo_left","label":"head \u00b7 stereo L","src":"video/head_stereo_left.mp4","size":"489.9 KB"},{"key":"head_depth","label":"head \u00b7 depth","src":"video/head_depth.mp4","size":"2.1 MB"},{"key":"head_stereo_right","label":"head \u00b7 stereo R","src":"video/head_stereo_right.mp4","size":"481.5 KB"}]</script>
 <script id="task" type="application/json">{"instruction":"Pick up the CapriSun juice bottle from the yellow table and stand it upright on the blue-and-white patterned plate.","object":"CapriSun juice bottle (green/blue label, orange cap)","target":"blue-and-white patterned plate","scene":"lab bay behind acoustic screens, yellow table"}</script>
 <script src="../../../lib/steps-ui.js"></script>
-<script src="../../../lib/viewer.js"></script>
+<script src="../../../lib/viewer.js?v=wx2"></script>
 </body></html>

teleopSample/faberU/t4_juice_bottle_into_black_tray/20260728075709/viewer.html

@@ -72,5 +72,5 @@
 <script id="cams" type="application/json">[{"key":"hand_left_color","label":"wrist \u00b7 left","src":"video/hand_left_color.mp4","size":"829.7 KB"},{"key":"head_color","label":"head \u00b7 color","src":"video/head_color.mp4","size":"274.1 KB"},{"key":"hand_right_color","label":"wrist \u00b7 right","src":"video/hand_right_color.mp4","size":"201.2 KB"},{"key":"head_stereo_left","label":"head \u00b7 stereo L","src":"video/head_stereo_left.mp4","size":"266.2 KB"},{"key":"head_depth","label":"head \u00b7 depth","src":"video/head_depth.mp4","size":"1.3 MB"},{"key":"head_stereo_right","label":"head \u00b7 stereo R","src":"video/head_stereo_right.mp4","size":"255.3 KB"}]</script>
 <script id="task" type="application/json">{"instruction":"Pick up the green juice bottle from the yellow table and place it into the black tray.","object":"green juice bottle (yellow cap)","target":"black tray","scene":"lab bay behind acoustic screens, yellow table"}</script>
 <script src="../../../lib/steps-ui.js"></script>
-<script src="../../../lib/viewer.js"></script>
+<script src="../../../lib/viewer.js?v=wx2"></script>
 </body></html>

teleopSample/faberU/t4_juice_bottle_into_black_tray/20260728080339/viewer.html

@@ -72,5 +72,5 @@
 <script id="cams" type="application/json">[{"key":"hand_left_color","label":"wrist \u00b7 left","src":"video/hand_left_color.mp4","size":"1.0 MB"},{"key":"head_color","label":"head \u00b7 color","src":"video/head_color.mp4","size":"288.0 KB"},{"key":"hand_right_color","label":"wrist \u00b7 right","src":"video/hand_right_color.mp4","size":"227.8 KB"},{"key":"head_stereo_left","label":"head \u00b7 stereo L","src":"video/head_stereo_left.mp4","size":"296.9 KB"},{"key":"head_depth","label":"head \u00b7 depth","src":"video/head_depth.mp4","size":"1.7 MB"},{"key":"head_stereo_right","label":"head \u00b7 stereo R","src":"video/head_stereo_right.mp4","size":"280.4 KB"}]</script>
 <script id="task" type="application/json">{"instruction":"Pick up the green juice bottle from the yellow table and place it into the black tray.","object":"green juice bottle (yellow cap)","target":"black tray","scene":"lab bay behind acoustic screens, yellow table"}</script>
 <script src="../../../lib/steps-ui.js"></script>
-<script src="../../../lib/viewer.js"></script>
+<script src="../../../lib/viewer.js?v=wx2"></script>
 </body></html>

teleopSample/faberU/t6_pick_up_green_tea_bottle/20260730045050/viewer.html

@@ -72,5 +72,5 @@
 <script id="cams" type="application/json">[{"key":"hand_left_color","label":"wrist \u00b7 left","src":"video/hand_left_color.mp4","size":"1.0 MB"},{"key":"head_color","label":"head \u00b7 color","src":"video/head_color.mp4","size":"348.4 KB"},{"key":"hand_right_color","label":"wrist \u00b7 right","src":"video/hand_right_color.mp4","size":"170.4 KB"},{"key":"head_stereo_left","label":"head \u00b7 stereo L","src":"video/head_stereo_left.mp4","size":"290.2 KB"},{"key":"head_depth","label":"head \u00b7 depth","src":"video/head_depth.mp4","size":"1.9 MB"},{"key":"head_stereo_right","label":"head \u00b7 stereo R","src":"video/head_stereo_right.mp4","size":"275.5 KB"}]</script>
 <script id="task" type="application/json">{"instruction":"Pick up the green-tea bottle from the yellow table and lift it clear of the surface; the episode ends with the bottle still held.","object":"green-tea bottle (transparent, green label)","target":"- (pick-and-hold task)","scene":"lab bay behind acoustic screens, yellow table"}</script>
 <script src="../../../lib/steps-ui.js"></script>
-<script src="../../../lib/viewer.js"></script>
+<script src="../../../lib/viewer.js?v=wx2"></script>
 </body></html>

teleopSample/faberU/t6_pick_up_green_tea_bottle/20260730045152/viewer.html

@@ -72,5 +72,5 @@
 <script id="cams" type="application/json">[{"key":"hand_left_color","label":"wrist \u00b7 left","src":"video/hand_left_color.mp4","size":"1.4 MB"},{"key":"head_color","label":"head \u00b7 color","src":"video/head_color.mp4","size":"569.8 KB"},{"key":"hand_right_color","label":"wrist \u00b7 right","src":"video/hand_right_color.mp4","size":"245.0 KB"},{"key":"head_stereo_left","label":"head \u00b7 stereo L","src":"video/head_stereo_left.mp4","size":"518.8 KB"},{"key":"head_depth","label":"head \u00b7 depth","src":"video/head_depth.mp4","size":"2.4 MB"},{"key":"head_stereo_right","label":"head \u00b7 stereo R","src":"video/head_stereo_right.mp4","size":"473.6 KB"}]</script>
 <script id="task" type="application/json">{"instruction":"Pick up the green-tea bottle from the yellow table and lift it clear of the surface; the episode ends with the bottle still held.","object":"green-tea bottle (transparent, green label)","target":"- (pick-and-hold task)","scene":"lab bay behind acoustic screens, yellow table"}</script>
 <script src="../../../lib/steps-ui.js"></script>
-<script src="../../../lib/viewer.js"></script>
+<script src="../../../lib/viewer.js?v=wx2"></script>
 </body></html>

teleopSample/lib/viewer.js

@@ -54,16 +54,50 @@
     else videos.forEach(v => v.pause());
   }
   playBtn.onclick = () => setPlaying(!playing);
-  let started = false, iv = setInterval(tryStart, 400);
-  function tryStart() {
-    if (started || playing || !videos.length || !videos.every(v => v.readyState >= 2)) return;
-    started = true; clearInterval(iv);
-    videos.forEach(v => v.muted = true);
-    setPlaying(true);
+  /* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+     preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+     WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+     index.html's iframe) and play() from its callback needs no tap; if play() is still
+     refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+     shows a log. start() must return the play() promise, stop() resets the UI. */
+  function wxAuto(vids,isPlaying,start,stop){
+    var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+    function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+    function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+      if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+      dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+    function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+    function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+      if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+      function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+      frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+    function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+      (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+    function go(force){
+      if(started||isPlaying())return;
+      var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+      if(wxWait&&!force)return;
+      if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+      started=true; if(iv){clearInterval(iv);iv=null;}
+      vs.forEach(function(v){v.muted=true;});
+      dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+      Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+        dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+    }
+    function arm(){
+      if(armed)return; armed=true;
+      function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+        document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+        armed=false;go(true);}
+      document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+      wxCall(function(){go(true);});
+    }
+    vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+    window.addEventListener('load',function(){go();});
+    iv=setInterval(go,400);
+    setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
   }
-  videos.forEach(v => { v.addEventListener('canplay', tryStart); v.addEventListener('loadeddata', tryStart); });
-  window.addEventListener('load', tryStart);
-  setTimeout(() => clearInterval(iv), 90000);
+  wxAuto(() => videos, () => playing, () => { setPlaying(true); return master.play(); }, () => setPlaying(false));
   setInterval(() => {
     if (playing && master.currentTime >= DUR - 0.08) {
       seekTo(0); videos.forEach(v => v.play().catch(() => {}));

teleopSample/mem_ep0.html

@@ -226,17 +226,51 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
   const a=document.createElement('a'); a.className='file-chip'; a.href=href; a.innerHTML=lbl; fm.appendChild(a); });
 
 // ---- autoplay (muted) + loop
-(function(){
-  let started=false, iv=setInterval(tryStart,400);
-  function tryStart(){
-    if(started||playing) return;
-    if(!vids.length||!vids.every(v=>v.readyState>=2)) return;
-    started=true; clearInterval(iv);
-    vids.forEach(v=>v.muted=true); setPlaying(true);
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+  }
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
   }
-  vids.forEach(v=>{ v.addEventListener('canplay',tryStart); v.addEventListener('loadeddata',tryStart); });
-  window.addEventListener('load',tryStart);
-  setTimeout(()=>clearInterval(iv),90000);
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+}
+(function(){
+  wxAuto(()=>vids, ()=>playing, ()=>{ setPlaying(true); return master.play(); }, ()=>setPlaying(false));
   setInterval(()=>{ if(playing&&master&&master.currentTime>=DUR-0.08){
     try{master.currentTime=0;}catch(e){} syncSlaves(0,true);
     if(playing) vids.forEach(v=>v.play().catch(()=>{})); }},200);

teleopSample/mem_ep1.html

@@ -226,17 +226,51 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
   const a=document.createElement('a'); a.className='file-chip'; a.href=href; a.innerHTML=lbl; fm.appendChild(a); });
 
 // ---- autoplay (muted) + loop
-(function(){
-  let started=false, iv=setInterval(tryStart,400);
-  function tryStart(){
-    if(started||playing) return;
-    if(!vids.length||!vids.every(v=>v.readyState>=2)) return;
-    started=true; clearInterval(iv);
-    vids.forEach(v=>v.muted=true); setPlaying(true);
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+  }
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
   }
-  vids.forEach(v=>{ v.addEventListener('canplay',tryStart); v.addEventListener('loadeddata',tryStart); });
-  window.addEventListener('load',tryStart);
-  setTimeout(()=>clearInterval(iv),90000);
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+}
+(function(){
+  wxAuto(()=>vids, ()=>playing, ()=>{ setPlaying(true); return master.play(); }, ()=>setPlaying(false));
   setInterval(()=>{ if(playing&&master&&master.currentTime>=DUR-0.08){
     try{master.currentTime=0;}catch(e){} syncSlaves(0,true);
     if(playing) vids.forEach(v=>v.play().catch(()=>{})); }},200);

teleopSample/sort_ep0.html

@@ -226,17 +226,51 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
   const a=document.createElement('a'); a.className='file-chip'; a.href=href; a.innerHTML=lbl; fm.appendChild(a); });
 
 // ---- autoplay (muted) + loop
-(function(){
-  let started=false, iv=setInterval(tryStart,400);
-  function tryStart(){
-    if(started||playing) return;
-    if(!vids.length||!vids.every(v=>v.readyState>=2)) return;
-    started=true; clearInterval(iv);
-    vids.forEach(v=>v.muted=true); setPlaying(true);
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+  }
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
   }
-  vids.forEach(v=>{ v.addEventListener('canplay',tryStart); v.addEventListener('loadeddata',tryStart); });
-  window.addEventListener('load',tryStart);
-  setTimeout(()=>clearInterval(iv),90000);
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+}
+(function(){
+  wxAuto(()=>vids, ()=>playing, ()=>{ setPlaying(true); return master.play(); }, ()=>setPlaying(false));
   setInterval(()=>{ if(playing&&master&&master.currentTime>=DUR-0.08){
     try{master.currentTime=0;}catch(e){} syncSlaves(0,true);
     if(playing) vids.forEach(v=>v.play().catch(()=>{})); }},200);

teleopSample/sort_ep1.html

@@ -226,17 +226,51 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
   const a=document.createElement('a'); a.className='file-chip'; a.href=href; a.innerHTML=lbl; fm.appendChild(a); });
 
 // ---- autoplay (muted) + loop
-(function(){
-  let started=false, iv=setInterval(tryStart,400);
-  function tryStart(){
-    if(started||playing) return;
-    if(!vids.length||!vids.every(v=>v.readyState>=2)) return;
-    started=true; clearInterval(iv);
-    vids.forEach(v=>v.muted=true); setPlaying(true);
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+  }
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
   }
-  vids.forEach(v=>{ v.addEventListener('canplay',tryStart); v.addEventListener('loadeddata',tryStart); });
-  window.addEventListener('load',tryStart);
-  setTimeout(()=>clearInterval(iv),90000);
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+}
+(function(){
+  wxAuto(()=>vids, ()=>playing, ()=>{ setPlaying(true); return master.play(); }, ()=>setPlaying(false));
   setInterval(()=>{ if(playing&&master&&master.currentTime>=DUR-0.08){
     try{master.currentTime=0;}catch(e){} syncSlaves(0,true);
     if(playing) vids.forEach(v=>v.play().catch(()=>{})); }},200);

teleopSample/wipe_ep0.html

@@ -226,17 +226,51 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
   const a=document.createElement('a'); a.className='file-chip'; a.href=href; a.innerHTML=lbl; fm.appendChild(a); });
 
 // ---- autoplay (muted) + loop
-(function(){
-  let started=false, iv=setInterval(tryStart,400);
-  function tryStart(){
-    if(started||playing) return;
-    if(!vids.length||!vids.every(v=>v.readyState>=2)) return;
-    started=true; clearInterval(iv);
-    vids.forEach(v=>v.muted=true); setPlaying(true);
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+  }
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
   }
-  vids.forEach(v=>{ v.addEventListener('canplay',tryStart); v.addEventListener('loadeddata',tryStart); });
-  window.addEventListener('load',tryStart);
-  setTimeout(()=>clearInterval(iv),90000);
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+}
+(function(){
+  wxAuto(()=>vids, ()=>playing, ()=>{ setPlaying(true); return master.play(); }, ()=>setPlaying(false));
   setInterval(()=>{ if(playing&&master&&master.currentTime>=DUR-0.08){
     try{master.currentTime=0;}catch(e){} syncSlaves(0,true);
     if(playing) vids.forEach(v=>v.play().catch(()=>{})); }},200);

teleopSample/wipe_ep1.html

@@ -226,17 +226,51 @@ CAMS.forEach(c=>{ const a=document.createElement('a'); a.className='file-chip';
   const a=document.createElement('a'); a.className='file-chip'; a.href=href; a.innerHTML=lbl; fm.appendChild(a); });
 
 // ---- autoplay (muted) + loop
-(function(){
-  let started=false, iv=setInterval(tryStart,400);
-  function tryStart(){
-    if(started||playing) return;
-    if(!vids.length||!vids.every(v=>v.readyState>=2)) return;
-    started=true; clearInterval(iv);
-    vids.forEach(v=>v.muted=true); setPlaying(true);
+/* autoplay that also works in in-app WebViews (WeChat iOS/Android X5): they ignore
+   preload, so readyState>=2 / canplay never arrive before play() — don't wait forever.
+   WeChat injects WeixinJSBridge into the top frame only (this page usually runs in
+   index.html's iframe) and play() from its callback needs no tap; if play() is still
+   refused, roll back to paused and retry on the first tap. ?wxdebug on the top URL
+   shows a log. start() must return the play() promise, stop() resets the UI. */
+function wxAuto(vids,isPlaying,start,stop){
+  var inWx=/MicroMessenger/i.test(navigator.userAgent), t0=Date.now(), started=false, armed=false, wxTried=false, wxWait=false, iv=null, dbgEl=null;
+  function frames(){var ws=[];try{ws.push(window.top);}catch(e){}try{ws.push(window.parent);}catch(e){}ws.push(window);return ws;}
+  function dbg(m){try{if(!/wxdebug/.test(window.top.location.search+window.location.search))return;}catch(e){return;}
+    if(!dbgEl){dbgEl=document.createElement('pre');dbgEl.style.cssText='position:fixed;left:0;bottom:0;z-index:99999;max-height:40vh;overflow:auto;margin:0;padding:4px 6px;font:10px/1.3 monospace;background:rgba(0,0,0,.8);color:#7f7;pointer-events:none;white-space:pre-wrap';document.body.appendChild(dbgEl);}
+    dbgEl.textContent+=(performance.now()/1000).toFixed(2)+' '+m+'\n';}
+  function bridge(){var ws=frames();for(var i=0;i<ws.length;i++){try{if(ws[i].WeixinJSBridge&&ws[i].WeixinJSBridge.invoke)return ws[i].WeixinJSBridge;}catch(e){}}return null;}
+  function wxCall(cb){var b=bridge();dbg('bridge '+(b?'yes':'no')+' top='+(window.top===window));
+    if(b){b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});return;}
+    function on(){var b=bridge();dbg('bridge ready '+(b?'yes':'no'));if(b)b.invoke('getNetworkType',{},function(){dbg('bridge cb');cb();});}
+    frames().forEach(function(w){try{w.document.addEventListener('WeixinJSBridgeReady',on,{once:true});}catch(e){}});}
+  function ready(vs){return vs.every(function(v){return v.readyState>=2;})||
+    (Date.now()-t0>1500&&vs.every(function(v){return v.readyState>=1||v.src;}));}
+  function go(force){
+    if(started||isPlaying())return;
+    var vs=vids(); if(!vs.length||(!force&&!ready(vs)))return;
+    if(wxWait&&!force)return;
+    if(inWx&&!wxTried){wxTried=wxWait=true;wxCall(function(){wxWait=false;go(true);});setTimeout(function(){wxWait=false;go(true);},1500);return;}
+    started=true; if(iv){clearInterval(iv);iv=null;}
+    vs.forEach(function(v){v.muted=true;});
+    dbg('play() rs='+vs.map(function(v){return v.readyState;}).join(','));
+    Promise.resolve(start()).then(function(){dbg('play ok');}).catch(function(err){
+      dbg('play rejected '+(err&&err.name)); try{stop();}catch(e){} started=false; arm(); });
+  }
+  function arm(){
+    if(armed)return; armed=true;
+    function once(ev){if(ev&&ev.target&&ev.target.closest&&ev.target.closest('#play'))return;
+      document.removeEventListener('touchend',once,true);document.removeEventListener('click',once,true);
+      armed=false;go(true);}
+    document.addEventListener('touchend',once,true);document.addEventListener('click',once,true);
+    wxCall(function(){go(true);});
   }
-  vids.forEach(v=>{ v.addEventListener('canplay',tryStart); v.addEventListener('loadeddata',tryStart); });
-  window.addEventListener('load',tryStart);
-  setTimeout(()=>clearInterval(iv),90000);
+  vids().forEach(function(v){v.addEventListener('canplay',function(){go();});v.addEventListener('loadeddata',function(){go();});});
+  window.addEventListener('load',function(){go();});
+  iv=setInterval(go,400);
+  setTimeout(function(){if(iv){clearInterval(iv);iv=null;}},90000);
+}
+(function(){
+  wxAuto(()=>vids, ()=>playing, ()=>{ setPlaying(true); return master.play(); }, ()=>setPlaying(false));
   setInterval(()=>{ if(playing&&master&&master.currentTime>=DUR-0.08){
     try{master.currentTime=0;}catch(e){} syncSlaves(0,true);
     if(playing) vids.forEach(v=>v.play().catch(()=>{})); }},200);