Walkthroughs: stop autoplaying muted, and show the length
Marty asked why they start muted. Browsers only permit autoplay when a video
is muted, so "expand and play" necessarily meant "expand and play silently" —
and for these that is the wrong trade, because the narration IS the training.
A member's first visit was showing them a silent walkthrough.
So the panel now opens paused with the play button showing. Pressing it is a
user gesture, which means it plays with sound, every time. preload stays
'none' until the panel opens, then goes to 'metadata' so an open panel shows
a real first frame instead of a black rectangle.
Each bar now also carries its runtime ("· 71 sec"), so nobody has to guess
whether they are committing to one minute or ten.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
@@ -58,6 +58,6 @@
|
||||
<p class="cp-note"><strong style="color:var(--text)">Teach it forward:</strong> when this saves you fifteen minutes, show your two how to use it — that's how the whole team gets faster. <br>Everything the engine writes follows the team's rules: no income promises, no invented numbers, honest about risk. It's still your name on the post, so read before you send. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-copy.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-copy-engine.mp4" data-title="Watch the Copy Engine walkthrough" data-key="copy" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-copy-engine.mp4" data-secs="· 71 sec" data-title="Watch the Copy Engine walkthrough" data-key="copy" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -58,6 +58,6 @@
|
||||
<p class="em-note"><strong style="color:var(--text)">Teach it forward:</strong> a member with a follow-up sequence running never loses a warm prospect to silence — show your two how to set theirs up. <br>Read every email before you send it; your name is on it. Generated copy follows the team's rules — no income promises, no invented numbers, honest about risk. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-email.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-email-engine.mp4" data-title="Watch the Email Engine walkthrough" data-key="email" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-email-engine.mp4" data-secs="· 42 sec" data-title="Watch the Email Engine walkthrough" data-key="email" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -73,6 +73,6 @@ curl -H "Authorization: Bearer YOUR_KEY" \
|
||||
<p class="d-note"><strong style="color:var(--text)">Everything here obeys the same rules as the rest of the Suite</strong> — no income claims, no invented figures, POL quantities only, Premium only. Generating a week does not post anything anywhere; it hands you the words and you decide what goes out. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-founder.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-founder-desk.mp4" data-title="Watch the Founder Desk walkthrough" data-key="founder" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-founder-desk.mp4" data-secs="· 55 sec" data-title="Watch the Founder Desk walkthrough" data-key="founder" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -72,6 +72,6 @@
|
||||
<p class="f-note"><strong style="color:var(--text)">Every page here is public and framable</strong>, so you can drop one into an ad, a QR code, or someone's inbox and it will just work. They all carry the same honest disclaimers as the rest of the site. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-funnel.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-funnel-factory.mp4" data-title="Watch the Funnel Factory walkthrough" data-key="funnel" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-funnel-factory.mp4" data-secs="· 34 sec" data-title="Watch the Funnel Factory walkthrough" data-key="funnel" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -64,6 +64,6 @@
|
||||
<p class="g-note"><strong style="color:var(--text)">Grants come out of a separate monthly pool that your level gives you</strong> — giving to your team never eats into your own allowances, because nobody should have to choose between equipping their people and using their own tools. Pools reset on the 1st along with everything else, so a grant is for unblocking somebody now rather than building a balance. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-grants.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-team-grants.mp4" data-title="Watch the Team Grants walkthrough" data-key="grants" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-team-grants.mp4" data-secs="· 58 sec" data-title="Watch the Team Grants walkthrough" data-key="grants" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -46,6 +46,6 @@
|
||||
<p class="i-note"><strong style="color:var(--text)">Nothing here identifies anybody.</strong> No positions, no names, no per-person numbers — this is a picture of what works, not a leaderboard of who is working. Groupings with too little traffic behind them are held back and counted rather than shown, because a click rate built on a few hundred impressions is noise dressed up as insight. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-intel.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-network-intel.mp4" data-title="Watch the Network Intelligence walkthrough" data-key="intel" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-network-intel.mp4" data-secs="· 63 sec" data-title="Watch the Network Intelligence walkthrough" data-key="intel" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -52,6 +52,6 @@
|
||||
<p class="l-note"><strong style="color:var(--text)">Every number here comes off the contract</strong>, not an estimate — positions, levels, and the POL forming below each person. Nothing on this page is a projection or a promise of what anyone will earn. <br><br>Coach people, don't chase them. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-leader.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-leader-ops.mp4" data-title="Watch the Leader Ops walkthrough" data-key="leader" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-leader-ops.mp4" data-secs="· 51 sec" data-title="Watch the Leader Ops walkthrough" data-key="leader" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -72,6 +72,6 @@
|
||||
<p class="pg-note"><strong style="color:var(--text)">Teach it forward:</strong> when your two join, walk them through building theirs — a personal page beats a bare link every time. <br>Rebuilding replaces your page at the same link, so anything you've already shared keeps working. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-page.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-page-builder.mp4" data-title="Watch the Page Builder walkthrough" data-key="page" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-page-builder.mp4" data-secs="· 42 sec" data-title="Watch the Page Builder walkthrough" data-key="page" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -83,6 +83,6 @@
|
||||
<p class="s-note"><strong style="color:var(--text)">Why this is deliberately slow to declare a winner:</strong> click rates on display advertising are small, so a two- or three-click gap on a few hundred impressions is noise, not a result. This tool waits until one version is clearly ahead before it calls anything — and when the versions genuinely tie, it says so, because that is useful information too: it means the wording isn't what's holding the ad back. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-split.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-split-tester.mp4" data-title="Watch the Split Tester walkthrough" data-key="split" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-split-tester.mp4" data-secs="· 54 sec" data-title="Watch the Split Tester walkthrough" data-key="split" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -98,6 +98,6 @@
|
||||
<p class="tf-note"><strong style="color:var(--text)">What this is, honestly:</strong> display advertising is <strong style="color:var(--text)">awareness volume</strong> — it puts your link in front of people browsing the network. It is not a lead list, and click rates on display inventory are low by nature. The conversations you have with people you know are still what actually builds a team; this runs quietly in the background while you do that. <br><br>All banners use approved team creative, so every ad on the network stays on-brand. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-traffic.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-traffic-desk.mp4" data-title="Watch the Traffic Desk walkthrough" data-key="traffic" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-traffic-desk.mp4" data-secs="· 74 sec" data-title="Watch the Traffic Desk walkthrough" data-key="traffic" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -56,6 +56,6 @@
|
||||
<p class="vd-note"><strong style="color:var(--text)">Teach it forward:</strong> the video does the explaining so your two don't have to — show them how to make their own the day they join. <br>The video itself is the team's produced master; only the ending is yours, so every share stays on-brand and on-message. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-video.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-video-maker.mp4" data-title="Watch the Video Maker walkthrough" data-key="video" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-video-maker.mp4" data-secs="· 32 sec" data-title="Watch the Video Maker walkthrough" data-key="video" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
@@ -42,6 +42,6 @@
|
||||
<p class="v-note"><strong style="color:var(--text)">One thing this will not do:</strong> it will never loosen the compliance rules to sound more like you. If your own writing makes income claims, the engine still will not repeat them — the honesty rules sit above your voice profile on purpose, because they are what keeps every member safe. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-voice.js"></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-voice-profile.mp4" data-title="Watch the Voice Profile walkthrough" data-key="voice" defer></script>
|
||||
<script src="/tool-video.js" data-video="/tv/suite-voice-profile.mp4" data-secs="· 55 sec" data-title="Watch the Voice Profile walkthrough" data-key="voice" defer></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
|
||||
+12
-9
@@ -42,21 +42,24 @@
|
||||
|
||||
var vid = document.createElement('video');
|
||||
vid.controls = true;
|
||||
// Nothing is fetched until the panel is actually opened; open() then bumps
|
||||
// this to 'metadata' so an expanded panel shows a real first frame rather
|
||||
// than a black rectangle.
|
||||
vid.preload = 'none';
|
||||
vid.playsInline = true;
|
||||
vid.src = SRC;
|
||||
body.appendChild(vid);
|
||||
|
||||
function open(autoplay) {
|
||||
function open() {
|
||||
body.hidden = false;
|
||||
wrap.classList.add('on');
|
||||
bar.setAttribute('aria-expanded', 'true');
|
||||
if (autoplay) {
|
||||
// Muted so a first-visit autoplay is never a surprise noise; the member
|
||||
// unmutes if they want it. Browsers block unmuted autoplay anyway.
|
||||
vid.muted = true;
|
||||
vid.play().catch(function () {});
|
||||
}
|
||||
// Deliberately NOT autoplaying. Browsers only permit autoplay when the
|
||||
// video is muted, and a silent walkthrough is worthless here — the
|
||||
// narration IS the training. So on first visit the panel opens with the
|
||||
// video paused and the play button showing; pressing it is a user
|
||||
// gesture, which means it plays with sound, every time.
|
||||
vid.preload = 'metadata';
|
||||
}
|
||||
function close() {
|
||||
body.hidden = true;
|
||||
@@ -66,7 +69,7 @@
|
||||
}
|
||||
|
||||
bar.addEventListener('click', function () {
|
||||
if (body.hidden) { open(false); markSeen(); }
|
||||
if (body.hidden) { open(); markSeen(); }
|
||||
else close();
|
||||
});
|
||||
|
||||
@@ -80,7 +83,7 @@
|
||||
if (lede && lede.parentNode) lede.parentNode.insertBefore(wrap, lede.nextSibling);
|
||||
else host.insertBefore(wrap, host.firstChild);
|
||||
|
||||
if (!seen()) { open(true); markSeen(); }
|
||||
if (!seen()) { open(); markSeen(); }
|
||||
}
|
||||
|
||||
function style() {
|
||||
|
||||
Reference in New Issue
Block a user