@@ -326,10 +342,26 @@ const MENU = [
document.addEventListener('visibilitychange', function(){ if (document.hidden) { clearTimeout(timer); vids(scs[si], false); } else show(si); });
}
var loops = document.querySelectorAll('.srl video.loop');
- if (still) { loops.forEach(function(v){ v.controls = true; }); }
+ if (still) { loops.forEach(function(v){ v.controls = true; }); document.querySelectorAll('#baPair video').forEach(function(v){ v.controls = true; }); }
else if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function(es){ es.forEach(function(e){ var v = e.target; if (e.isIntersecting) { v.play().catch(function(){}); } else { v.pause(); } }); }, { threshold: .35 });
loops.forEach(function(v){ io.observe(v); });
+ // 直す前・直した後の2本は、見えたら頭から同時に流し、どちらかが終わったら2本とも頭に戻す
+ var ba = document.getElementById('baPair');
+ if (ba) {
+ var bv = [].slice.call(ba.querySelectorAll('video'));
+ // 2本とも再生できる状態になってから頭をそろえて流す（片方の読み込みが遅いと、先に流れた方とずれるため）
+ var ready = function(){ return bv.every(function(v){ return v.readyState >= 3; }); };
+ var restart = function(){
+ if (!ready()) { bv.forEach(function(v){ v.addEventListener('canplay', function once(){ v.removeEventListener('canplay', once); if (ready()) restart(); }); }); return; }
+ bv.forEach(function(v){ try { v.currentTime = 0; v.play().catch(function(){}); } catch(e){} });
+ };
+ bv.forEach(function(v){ v.addEventListener('ended', restart); });
+ // 流れている間も、右を左の時刻に合わせ直す（0.15秒以上ずれたら）
+ bv[0].addEventListener('timeupdate', function(){ var d = bv[1].currentTime - bv[0].currentTime; if (!bv[1].paused && Math.abs(d) > .15 && !bv[0].ended) { try { bv[1].currentTime = bv[0].currentTime; } catch(e){} } });
+ var seen = false;
+ new IntersectionObserver(function(es){ es.forEach(function(e){ if (e.isIntersecting) { if (!seen) { seen = true; bv.forEach(function(v){ v.preload = 'auto'; }); restart(); } else { bv.forEach(function(v){ v.play().catch(function(){}); }); } } else { bv.forEach(function(v){ v.pause(); }); } }); }, { threshold: .35 }).observe(ba);
+ }
}
// ---- 02 ①：店が回る最少のスタッフ ----
@@ -530,6 +562,14 @@ const MENU = [
.srl .srow em.same{background:#f0f0f0;color:var(--muted)}
.srl .srow em.cut{background:var(--ink);color:#fff}
.srl .srow em.plus{background:transparent;color:var(--muted);border:1px solid var(--rule)}
+.srl .ba{grid-column:1/-1;order:3;display:grid;gap:12px;margin:0}
+.srl .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.srl .ba-v{display:grid;gap:10px;min-width:0}
+.srl .ba video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:992/864;background:#e8e2d6;border-radius:var(--r-m)}
+.srl .ba-k{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-size:.84rem;font-weight:700}
+.srl .ba-tag{display:inline-block;padding:3px 10px;border-radius:4px;font-size:.8rem;background:#f0f0f0;color:var(--muted)}
+.srl .ba-tag.after{background:var(--ink);color:#fff}
+@media (max-width:640px){.srl .ba-pair{grid-template-columns:1fr}}
.srl .clip{display:grid;gap:10px}
.srl .clip-4{max-width:480px;justify-self:center;width:100%}
.srl .clip-4 video{aspect-ratio:694/720!important}