Use static hero poster in mobile webviews

z-taylcr7 · z-taylcr7 · commit 45547ad70a8d · 2026-06-12T07:50:11.000+08:00
diff --git a/public/RoboNaldo/index.html b/public/RoboNaldo/index.html
@@ -18,7 +18,7 @@
   <!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
   <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
   <!-- <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> -->
-  <link rel="stylesheet" href="static/css/index.css?v=20260612b">
+  <link rel="stylesheet" href="static/css/index.css?v=20260612c">
 </head>
 <body>
   <div class="top-progress" aria-hidden="true"><span class="top-progress-bar"></span></div>
@@ -72,19 +72,19 @@ <h1 class="paper-title">
           </svg>
           <span>paper</span>
         </a>
-        <a class="hero-link" href="https://github.com/opendrivelab/RoboNaldo" target="_blank" rel="noopener">
-          <svg class="hero-link-ic" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <path d="M12 .5a11.5 11.5 0 0 0-3.64 22.42c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.39-3.88-1.39-.53-1.35-1.3-1.71-1.3-1.71-1.07-.73.08-.72.08-.72 1.18.08 1.8 1.21 1.8 1.21 1.05 1.8 2.76 1.28 3.43.98.1-.77.41-1.28.74-1.58-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.04 11.04 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.8 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.68.42.36.79 1.07.79 2.16v3.2c0 .31.21.66.8.55A11.5 11.5 0 0 0 12 .5z"/>
-          </svg>
-          <span>Code</span>
-        </a>
         <a class="hero-link" href="https://youtu.be/BuHNzqebIqc" target="_blank" rel="noopener">
           <svg class="hero-link-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <path d="M22 8a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4z"/>
             <path d="M10 9l5 3-5 3z" fill="currentColor"/>
           </svg>
           <span>Video</span>
         </a>
+        <a class="hero-link" href="https://github.com/opendrivelab/RoboNaldo" target="_blank" rel="noopener">
+          <svg class="hero-link-ic" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M12 .5a11.5 11.5 0 0 0-3.64 22.42c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.39-3.88-1.39-.53-1.35-1.3-1.71-1.3-1.71-1.07-.73.08-.72.08-.72 1.18.08 1.8 1.21 1.8 1.21 1.05 1.8 2.76 1.28 3.43.98.1-.77.41-1.28.74-1.58-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.04 11.04 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.8 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.68.42.36.79 1.07.79 2.16v3.2c0 .31.21.66.8.55A11.5 11.5 0 0 0 12 .5z"/>
+          </svg>
+          <span>Code</span>
+        </a>
       </nav>
 
       <p class="one-liner">World's first less-than-1-meter-level accurate humanoid soccer shooting policy in general cases.<br> Single human reference, learn to track, then deviate and adapt.</p>
@@ -544,6 +544,6 @@ <h2>BibTeX</h2>
     </div>
   </footer>
 
-  <script src="static/js/index.js?v=20260612f"></script>
+  <script src="static/js/index.js?v=20260612h"></script>
 </body>
 </html>
diff --git a/public/RoboNaldo/static/css/index.css b/public/RoboNaldo/static/css/index.css
@@ -186,6 +186,7 @@ img { display: block; max-width: 100%; }
   width: 100%;
   height: 100%;
   object-fit: cover;
+  display: block;
   z-index: 0;
   transform: scale(1.04);
 }
diff --git a/public/RoboNaldo/static/js/index.js b/public/RoboNaldo/static/js/index.js
@@ -62,6 +62,7 @@ document.querySelectorAll("[data-copy-target]").forEach((button) => {
   const isIOS = /iP(?:hone|ad|od)/i.test(ua);
   const isKnownIOSBrowser = /Version\/[\d.]+.*Safari|CriOS|FxiOS|EdgiOS/i.test(ua);
   const isIOSWebView = isIOS && !isKnownIOSBrowser;
+  const isMobileLike = isIOS || /Android|Mobile|Windows Phone/i.test(ua);
   const isConstrainedBrowser = isIOSWebView || /Twitter|MicroMessenger|FBAN|FBAV|Instagram|Line|LinkedInApp|Feishu|Lark|Bytedance|Aweme|MQQBrowser|QQ\//i.test(ua);
 
   const hydrate = (video) => {
@@ -107,10 +108,27 @@ document.querySelectorAll("[data-copy-target]").forEach((button) => {
     parent.appendChild(button);
   };
 
-  if (isConstrainedBrowser) {
+  const replaceHeroWithPoster = () => {
     heroVideos.forEach((video) => {
+      if (!video.parentElement) return;
+      const poster = video.getAttribute("poster");
+      if (!poster) return;
+
+      const image = document.createElement("img");
+      image.className = video.className;
+      image.src = poster;
+      image.alt = "";
+      image.setAttribute("aria-hidden", "true");
+
       video.autoplay = false;
+      video.removeAttribute("autoplay");
+      video.pause();
+      video.replaceWith(image);
     });
+  };
+
+  if (isConstrainedBrowser) {
+    replaceHeroWithPoster();
 
     [...primaryDeferredVideos, ...videos].forEach((video) => {
       video.autoplay = false;
@@ -127,10 +145,14 @@ document.querySelectorAll("[data-copy-target]").forEach((button) => {
     return;
   }
 
-  heroVideos.forEach((video) => {
-    hydrate(video);
-    tryPlay(video);
-  });
+  if (isMobileLike) {
+    replaceHeroWithPoster();
+  } else {
+    heroVideos.forEach((video) => {
+      hydrate(video);
+      tryPlay(video);
+    });
+  }
 
   primaryDeferredVideos.forEach((video) => {
     hydrate(video);

Original file line number	Diff line number	Diff line change
`@@ -186,6 +186,7 @@ img { display: block; max-width: 100%; }`
`186`	`186`	`width: 100%;`
`187`	`187`	`height: 100%;`
`188`	`188`	`object-fit: cover;`
	`189`	`+ display: block;`
`189`	`190`	`z-index: 0;`
`190`	`191`	`transform: scale(1.04);`
`191`	`192`	`}`