Add a click-to-enter splash screen (infiniteslop.ai's unmute trick)

The video autoplays muted underneath a full-screen splash — logo, play icon, slogan and a credit line, matching infiniteslop.ai's own splash. Clicking it is the user gesture that lets the browser allow unmuted playback, so desktop viewers land with sound instead of the silent-until-you-find-the-mute-button experience from the previous change. Mobile stays muted after entry, same as infiniteslop.ai, since unmuted autoplay-adjacent playback is unreliable there. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0144MiJ2cLjMd9jWaeEpVfUJ

Add a click-to-enter splash screen (infiniteslop.ai's unmute trick)
The video autoplays muted underneath a full-screen splash — logo, play icon, slogan and a credit line, matching infiniteslop.ai's own splash. Clicking it is the user gesture that lets the browser allow unmuted playback, so desktop viewers land with sound instead of the silent-until-you-find-the-mute-button experience from the previous change. Mobile stays muted after entry, same as infiniteslop.ai, since unmuted autoplay-adjacent playback is unreliable there. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0144MiJ2cLjMd9jWaeEpVfUJ
yibo
1 parent 72be2914
Showing 3 changed files with 124 additions and 46 deletions
library.json
live.css
live.html
@@ -79,7 +79,7 @@
     "likes": 0,
     "createdAt": 1788192915845,
     "promptEn": "scholar watches the room warily",
-    "lastPlayedAt": 1788251736825
+    "lastPlayedAt": 1788253865811
   },
   {
     "id": "e8cbb73560ef",
@@ -154,7 +154,7 @@
     "likes": 0,
     "createdAt": 1788192913886,
     "promptEn": "taoist panics, freaked out",
-    "lastPlayedAt": 1788250312031
+    "lastPlayedAt": 1788253751763
   },
   {
     "id": "45c1136d1e05",
@@ -214,7 +214,7 @@
     "likes": 0,
     "createdAt": 1788192912912,
     "promptEn": "taoist charmed, hesitating",
-    "lastPlayedAt": 1788251760826
+    "lastPlayedAt": 1788253947848
   },
   {
     "id": "f8da9934c823",
@@ -319,7 +319,7 @@
     "likes": 0,
     "createdAt": 1788188423583,
     "promptEn": "woman in white scared, dodging",
-    "lastPlayedAt": 1788251198437
+    "lastPlayedAt": 1788253953855
   },
   {
     "id": "1597db4be561",
@@ -348,7 +348,7 @@
     "partition": "ref2va",
     "likes": 0,
     "createdAt": 1788186218619,
-    "lastPlayedAt": 1788252471153,
+    "lastPlayedAt": 1788253885823,
     "promptEn": "woman in white evading, scared"
   },
   {
@@ -499,7 +499,7 @@
     "likes": 0,
     "createdAt": 1788153988474,
     "promptEn": "astronaut at a martian canyon, visor reflecting alien ruins, then aerial view of the city",
-    "lastPlayedAt": 1788251428589
+    "lastPlayedAt": 1788253845801
   },
   {
     "id": "194fc2b56cb5",
@@ -514,7 +514,7 @@
     "likes": 0,
     "createdAt": 1788138492364,
     "promptEn": "astronaut on a Martian canyon, helmet reflecting an alien ruined city",
-    "lastPlayedAt": 1788251558701
+    "lastPlayedAt": 1788253805777
   },
   {
     "id": "f84b8f044ec5",
@@ -679,7 +679,7 @@
     "likes": 0,
     "createdAt": 1788026876886,
     "promptEn": "apartment manager in an eerie corridor, red elevator light flickering, holding out a key",
-    "lastPlayedAt": 1788250332049
+    "lastPlayedAt": 1788253825788
   },
   {
     "id": "cdd03cca8461",
@@ -709,7 +709,7 @@
     "likes": 0,
     "createdAt": 1788026569123,
     "promptEn": "pale dream demon in a suit, reaching out a hand inside a dream train car",
-    "lastPlayedAt": 1788252102983
+    "lastPlayedAt": 1788253611671
   },
   {
     "id": "bd6e2b264243",
@@ -889,7 +889,7 @@
     "likes": 0,
     "createdAt": 1788025620717,
     "promptEn": "alien tyrant holding a glowing energy sphere, sneering on a rocky green battlefield",
-    "lastPlayedAt": 1788252495168
+    "lastPlayedAt": 1788253757767
   },
   {
     "id": "9db41d807330",
@@ -934,7 +934,7 @@
     "likes": 0,
     "createdAt": 1788024900966,
     "promptEn": "player 101 blocking the path on a high glass bridge, threatening you",
-    "lastPlayedAt": 1788251722799
+    "lastPlayedAt": 1788253797782
   },
   {
     "id": "d6aab3fce63d",
@@ -964,7 +964,7 @@
     "likes": 0,
     "createdAt": 1788024491625,
     "promptEn": "prince signs an execution order in the trial hall, points at the guillotine",
-    "lastPlayedAt": 1788251928912
+    "lastPlayedAt": 1788253737754
   },
   {
     "id": "8a933feb52c4",
@@ -994,7 +994,7 @@
     "likes": 0,
     "createdAt": 1788016668421,
     "promptEn": "pirate negotiation, catching Barbossa's flaw and turning the tables",
-    "lastPlayedAt": 1788250676206
+    "lastPlayedAt": 1788253829791
   },
   {
     "id": "e3b18b5dfd8e",
@@ -1024,7 +1024,7 @@
     "likes": 0,
     "createdAt": 1788016203093,
     "promptEn": "pirate negotiation, held the goal but paid a price",
-    "lastPlayedAt": 1788250906296
+    "lastPlayedAt": 1788253859804
   },
   {
     "id": "18aa882cbd0b",
@@ -1249,7 +1249,7 @@
     "likes": 0,
     "createdAt": 1788012917294,
     "promptEn": "standing on the glass bridge, facing off with player 101",
-    "lastPlayedAt": 1788251642756
+    "lastPlayedAt": 1788253839798
   },
   {
     "id": "8f23de61904f",
@@ -1324,7 +1324,7 @@
     "likes": 0,
     "createdAt": 1788012202708,
     "promptEn": "facing Vecna, went in head-on and got seen through",
-    "lastPlayedAt": 1788248276792
+    "lastPlayedAt": 1788253713746
   },
   {
     "id": "40ccb04f76e9",
@@ -1369,7 +1369,7 @@
     "likes": 0,
     "createdAt": 1788011488775,
     "promptEn": "graveyard standoff, exploiting a flaw to counter Voldemort",
-    "lastPlayedAt": 1788252403130
+    "lastPlayedAt": 1788253875818
   },
   {
     "id": "24845be71ea0",
@@ -1399,7 +1399,7 @@
     "likes": 0,
     "createdAt": 1788011251158,
     "promptEn": "facing Voldemort, held the goal but paid a price",
-    "lastPlayedAt": 1788251207183
+    "lastPlayedAt": 1788253835799
   },
   {
     "id": "58f68b111429",
@@ -1504,7 +1504,7 @@
     "likes": 0,
     "createdAt": 1788009586293,
     "promptEn": "facing Thanos, stayed passive and got cornered",
-    "lastPlayedAt": 1788249207456
+    "lastPlayedAt": 1788253869815
   },
   {
     "id": "438c98cf4973",
@@ -1639,7 +1639,7 @@
     "likes": 0,
     "createdAt": 1788007441156,
     "promptEn": "battlefield in Jaku city, the city in ruins, heroes in crisis",
-    "lastPlayedAt": 1788251770832
+    "lastPlayedAt": 1788253771767
   },
   {
     "id": "68219d6b68c8",
@@ -1759,7 +1759,7 @@
     "likes": 0,
     "createdAt": 1788005541640,
     "promptEn": "facing Frieza, went in head-on and got seen through",
-    "lastPlayedAt": 1788246977682
+    "lastPlayedAt": 1788253741753
   },
   {
     "id": "574b47b00316",
@@ -1864,7 +1864,7 @@
     "likes": 0,
     "createdAt": 1788004115612,
     "promptEn": "facing Mahito, stayed passive and got cornered",
-    "lastPlayedAt": 1788252553190
+    "lastPlayedAt": 1788253899831
   },
   {
     "id": "f4a2870386c6",
@@ -1969,7 +1969,7 @@
     "likes": 0,
     "createdAt": 1788002455066,
     "promptEn": "facing Reiner, went in head-on and got seen through",
-    "lastPlayedAt": 1788251886889
+    "lastPlayedAt": 1788253879816
   },
   {
     "id": "5846d645e870",
@@ -2014,7 +2014,7 @@
     "likes": 0,
     "createdAt": 1788001508988,
     "promptEn": "in the ruins of Konoha, exploiting a flaw to counter Pain",
-    "lastPlayedAt": 1788252503166
+    "lastPlayedAt": 1788253801782
   },
   {
     "id": "79304c061606",
@@ -2074,7 +2074,7 @@
     "likes": 0,
     "createdAt": 1788000812932,
     "promptEn": "facing Pain, went in head-on and got seen through",
-    "lastPlayedAt": 1788252529179
+    "lastPlayedAt": 1788253905836
   },
   {
     "id": "f691ac021df0",
@@ -2119,7 +2119,7 @@
     "likes": 0,
     "createdAt": 1788000105889,
     "promptEn": "facing Sakazuki, exploiting a flaw to counter him",
-    "lastPlayedAt": 1788250850269
+    "lastPlayedAt": 1788253821783
   },
   {
     "id": "c9be7c07b793",
@@ -2164,7 +2164,7 @@
     "likes": 0,
     "createdAt": 1787999633670,
     "promptEn": "facing Sakazuki, went in head-on and got seen through",
-    "lastPlayedAt": 1788251129144
+    "lastPlayedAt": 1788253777771
   },
   {
     "id": "a8b8b4430ee3",
@@ -2179,7 +2179,7 @@
     "likes": 0,
     "createdAt": 1787999397097,
     "promptEn": "facing Sakazuki, stayed passive and got cornered",
-    "lastPlayedAt": 1788252397128
+    "lastPlayedAt": 1788253761764
   },
   {
     "id": "88923aaf57f3",
@@ -2269,7 +2269,7 @@
     "likes": 0,
     "createdAt": 1787831362083,
     "promptEn": "constable promises to get her out safely if she trusts him",
-    "lastPlayedAt": 1788251652757
+    "lastPlayedAt": 1788253719743
   },
   {
     "id": "5ede61c01b22",
@@ -2344,7 +2344,7 @@
     "likes": 0,
     "createdAt": 1787762224218,
     "promptEn": "constable stands under the lamp, holding her gaze through the screen, not backing away",
-    "lastPlayedAt": 1788252377122
+    "lastPlayedAt": 1788253631690
   },
   {
     "id": "f2e70205766b",
@@ -2404,7 +2404,7 @@
     "likes": 0,
     "createdAt": 1787730331663,
     "promptEn": "constable steps in from the rainy night, spots her, introduces himself with a cover story",
-    "lastPlayedAt": 1788249111414
+    "lastPlayedAt": 1788253781772
   },
   {
     "id": "84e8337de242",
@@ -2554,7 +2554,7 @@
     "likes": 0,
     "createdAt": 1787708646888,
     "promptEn": "constable studies her through the screen growing suspicious, hand drifting to his sword",
-    "lastPlayedAt": 1788251602734
+    "lastPlayedAt": 1788253697730
   },
   {
     "id": "1c0c203cfb3b",
@@ -2839,7 +2839,7 @@
     "likes": 0,
     "createdAt": 1787674609636,
     "promptEn": "constable silently watches her through the screen gaps, camera slowly zooming in on her face",
-    "lastPlayedAt": 1788249261479
+    "lastPlayedAt": 1788253983858
   },
   {
     "id": "5e53f7f5fe9b",
@@ -2899,7 +2899,7 @@
     "likes": 0,
     "createdAt": 1787674351536,
     "promptEn": "constable searches an old house at night, candle flickering, woman hiding behind the screen",
-    "lastPlayedAt": 1788250201967
+    "lastPlayedAt": 1788253615680
   },
   {
     "id": "dc13e4f165dc",
@@ -2914,7 +2914,7 @@
     "likes": 0,
     "createdAt": 1787672849330,
     "promptEn": "constable cautiously follows her silent gesture, hand near his sword, tracking her movement",
-    "lastPlayedAt": 1788252175018
+    "lastPlayedAt": 1788253645695
   },
   {
     "id": "feb4df69e1a2",
@@ -3319,7 +3319,7 @@
     "likes": 0,
     "createdAt": 1787577878370,
     "promptEn": "man barges into the old house apologizing, woman in white behind the screen",
-    "lastPlayedAt": 1788250294012
+    "lastPlayedAt": 1788253661702
   },
   {
     "id": "0e75ef71c3d0",
@@ -3438,7 +3438,7 @@
     "partition": "text",
     "likes": 0,
     "createdAt": 1787576358982,
-    "lastPlayedAt": 1788246088963,
+    "lastPlayedAt": 1788253923842,
     "promptEn": "man apologizes, says something outside was chasing him"
   },
   {
@@ -3469,7 +3469,7 @@
     "likes": 0,
     "createdAt": 1787575790848,
     "promptEn": "man apologizes, says something outside was chasing him",
-    "lastPlayedAt": 1788247283936
+    "lastPlayedAt": 1788253927842
   },
   {
     "id": "5e6dcf2c8cfd",
@@ -3589,7 +3589,7 @@
     "likes": 0,
     "createdAt": 1787497396594,
     "promptEn": "otome game male lead showcase PV",
-    "lastPlayedAt": 1788250885690
+    "lastPlayedAt": 1788253932562
   },
   {
     "id": "36ac12f2f29e",
@@ -3619,7 +3619,7 @@
     "likes": 0,
     "createdAt": 1787493303602,
     "promptEn": "game menu UI, character swaps out a mechanical arm",
-    "lastPlayedAt": 1788252523177
+    "lastPlayedAt": 1788253767768
   },
   {
     "id": "e1fd99e4ab97",
@@ -3889,7 +3889,7 @@
     "likes": 0,
     "createdAt": 1787444313690,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788250484120
+    "lastPlayedAt": 1788253967852
   },
   {
     "id": "e56962bd770f",
@@ -3904,7 +3904,7 @@
     "likes": 0,
     "createdAt": 1787442174982,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788249819782
+    "lastPlayedAt": 1788253909828
   },
   {
     "id": "18105bc2900b",
@@ -3934,7 +3934,7 @@
     "likes": 0,
     "createdAt": 1787436029475,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788243140456
+    "lastPlayedAt": 1788253665707
   },
   {
     "id": "896859e59dae",
@@ -4279,7 +4279,7 @@
     "likes": 0,
     "createdAt": 1787367454065,
     "promptEn": "golden portal opens, man in green jacket throws a glowing spear",
-    "lastPlayedAt": 1788250848268
+    "lastPlayedAt": 1788253735749
   },
   {
     "id": "e6c241be377f",
@@ -4324,7 +4324,7 @@
     "likes": 0,
     "createdAt": 1787332996051,
     "promptEn": "golden portal opens, man in green jacket throws a glowing spear",
-    "lastPlayedAt": 1788250762247
+    "lastPlayedAt": 1788253717746
   },
   {
     "id": "bf7d973d02a3",
@@ -4474,7 +4474,7 @@
     "likes": 0,
     "createdAt": 1787290119529,
     "promptEn": "misty Jiangnan old town at dawn, woman walking with an oil-paper umbrella",
-    "lastPlayedAt": 1788251302490
+    "lastPlayedAt": 1788253747759
   },
   {
     "id": "06bb43196c46",
@@ -351,6 +351,57 @@ body {
 .chat-input-row button:disabled { opacity: .5; cursor: not-allowed; }
 .say-hint { padding: 2px 4px 0; font-size: 11.5px; font-weight: bold; color: var(--muted); min-height: 1.4em; }
+/* ---- click-to-enter splash: branding + the gesture that unlocks sound ---- */
+.splash {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, .35));
+}
+.splash-inner { text-align: center; padding: 20px; }
+.splash-logo {
+  font-family: "Shrikhand", "Cooper Black", serif;
+  font-weight: 400;
+  font-size: min(64px, 11vw);
+  line-height: 1.2;
+  color: #fff;
+  -webkit-text-stroke: 3px #000;
+  paint-order: stroke fill;
+  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000, 5px 5px 0 #000;
+  margin-bottom: 20px;
+}
+.splash-play {
+  width: 76px;
+  height: 76px;
+  margin: 0 auto 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #fff;
+  border: 3px solid #000;
+  box-shadow: var(--shadow);
+  font-size: 26px;
+  color: var(--ink);
+  padding-left: 5px;
+}
+.splash-sub {
+  font: bold 15px Tahoma, sans-serif;
+  color: #fff;
+  line-height: 1.6;
+  text-shadow: 0 1px 4px #000, 0 0 12px rgba(0, 0, 0, .8);
+}
+.splash-credit {
+  margin-top: 16px;
+  font: bold 13px Tahoma, sans-serif;
+  color: var(--accent);
+  text-shadow: 0 1px 4px #000;
+}
+
 /* ---- nickname modal ---- */
 .nickname-modal {
   position: fixed;
@@ -65,6 +65,15 @@
   </div>
 </div>
+<div class="splash" id="splash">
+  <div class="splash-inner">
+    <div class="splash-logo">AI 短剧频道</div>
+    <div class="splash-play">▶</div>
+    <div class="splash-sub">一个永不停播的 AI 生成短剧频道<br />弹幕决定下一集演什么</div>
+    <div class="splash-credit">🍋 AI 短剧频道 出品</div>
+  </div>
+</div>
+
 <div class="nickname-modal" id="nicknameModal" hidden>
   <div class="nickname-box">
     <div class="nickname-title">先起个昵称才能发言</div>
@@ -107,6 +116,7 @@ const nicknameConfirmBtn = document.getElementById(&quot;nicknameConfirmBtn&quot;);
 const chatIdentityRow = document.getElementById("chatIdentityRow");
 const changeNameBtn = document.getElementById("changeNameBtn");
 const currentNickname = document.getElementById("currentNickname");
+const splash = document.getElementById("splash");
 const clientId = Math.random().toString(36).slice(2);
 muteBtn.addEventListener("click", () => {
@@ -125,6 +135,23 @@ function tryPlay() {
   });
 }
+// Click-to-enter splash (same trick as infiniteslop.ai): the video is already
+// autoplaying muted underneath, and this click is the user gesture that lets
+// us switch it to unmuted playback — the one reliable way around the browser's
+// no-unmuted-autoplay-without-a-gesture policy. Also doubles as a branding
+// moment (logo/slogan/credit) instead of a bare "click to unmute" prompt.
+// Phones stay muted after entry — unmuted autoplay-adjacent playback on
+// mobile Safari/Chrome is unreliable and feels intrusive.
+splash.addEventListener("click", () => {
+  splash.remove();
+  const desktop = matchMedia("(min-width: 769px)").matches;
+  player.muted = !desktop;
+  player.play().catch(() => {
+    player.muted = true;
+  });
+  muteBtn.textContent = player.muted ? "🔇 静音" : "🔈 有声";
+});
+
 let chatClosed = false;
 chatToggleBtn.addEventListener("click", () => {
   chatClosed = !chatClosed;