143 lines
4.5 KiB
HTML
143 lines
4.5 KiB
HTML
|
<!--
|
|||
|
|
Layout: pip — card fills canvas, video rounded PiP in corner
|
|||
|
|
─────────────────────────────────────────────────────────────────────
|
|||
|
|
Implementation: card.zone = "fullscreen" + shrink #video-wrap to a
|
|||
|
|
corner pill via GSAP, and add a .pip-pill CSS class for the chrome.
|
|||
|
|
|
|||
|
|
Recommended storyboard.json card entry (strict v3):
|
|||
|
|
{
|
|||
|
|
"id": "card-XX",
|
|||
|
|
"intent": "content-heavy moment with speaker as small accent",
|
|||
|
|
"startSec": 8, "endSec": 14,
|
|||
|
|
"accentIndex": 0,
|
|||
|
|
"zone": "fullscreen",
|
|||
|
|
"contentHints": { "kicker": "...", "title": "...", "detail": "..." }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
GSAP target for #video-wrap (corner pill — pick one per source aspect):
|
|||
|
|
|
|||
|
|
landscape (1920×1080), 16:9 source video:
|
|||
|
|
tl.set('#video-wrap', { className: 'video-wrapper pip-pill' }, START_SEC);
|
|||
|
|
tl.to('#video-wrap',
|
|||
|
|
{ left: 1432, top: 28, width: 460, height: 258,
|
|||
|
|
duration: 0.6, ease: 'power2.inOut' }, START_SEC);
|
|||
|
|
|
|||
|
|
landscape, 9:16 source video (vertical phone footage):
|
|||
|
|
tl.to('#video-wrap',
|
|||
|
|
{ left: 1644, top: 28, width: 248, height: 440, ... }, START_SEC);
|
|||
|
|
|
|||
|
|
portrait (1080×1920), 16:9 source video:
|
|||
|
|
tl.to('#video-wrap',
|
|||
|
|
{ left: 690, top: 28, width: 360, height: 203, ... }, START_SEC);
|
|||
|
|
|
|||
|
|
portrait, 9:16 source video:
|
|||
|
|
tl.to('#video-wrap',
|
|||
|
|
{ left: 738, top: 28, width: 312, height: 555, ... }, START_SEC);
|
|||
|
|
|
|||
|
|
4:5 (1080×1350) — y values × 0.703, w/h × 0.703:
|
|||
|
|
landscape-source: { left: 690, top: 28, width: 360, height: 203 } → keep, fits
|
|||
|
|
portrait-source : { left: 738, top: 28, width: 312, height: 390 }
|
|||
|
|
|
|||
|
|
Recommended .pip-pill CSS (add to composition <style>):
|
|||
|
|
.video-wrapper.pip-pill {
|
|||
|
|
border-radius: 14px;
|
|||
|
|
box-shadow:
|
|||
|
|
0 24px 60px -20px rgba(0,0,0,.45),
|
|||
|
|
0 0 0 4px rgba(255,255,255,.7),
|
|||
|
|
0 0 0 5px rgba(0,0,0,.18);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Notes
|
|||
|
|
- Card-first composition for content-heavy talks.
|
|||
|
|
- Default corner is top-right (above); for bottom-right flip y to
|
|||
|
|
canvasH - videoH - 28 (e.g. portrait 16:9 source bottom-right:
|
|||
|
|
{ left: 690, top: 1689, width: 360, height: 203 }).
|
|||
|
|
- DOM order: card-host appears BEFORE video-wrapper for the pip window
|
|||
|
|
so the video pill paints on top of the card. If you keep them in
|
|||
|
|
natural DOM order (video first, card second), use z-index on the
|
|||
|
|
card-host to push it behind.
|
|||
|
|
-->
|
|||
|
|
<!doctype html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<title>layout · pip (card hero + video pill)</title>
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
background: #0a0c12;
|
|||
|
|
color: #fff;
|
|||
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|||
|
|
}
|
|||
|
|
.stage {
|
|||
|
|
position: relative;
|
|||
|
|
width: 1920px;
|
|||
|
|
height: 1080px;
|
|||
|
|
transform-origin: top left;
|
|||
|
|
transform: scale(0.5);
|
|||
|
|
background: #0a0c12;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.region {
|
|||
|
|
position: absolute;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font:
|
|||
|
|
600 24px/1.3 ui-monospace,
|
|||
|
|
monospace;
|
|||
|
|
letter-spacing: 0.12em;
|
|||
|
|
}
|
|||
|
|
.card-region {
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 1920px;
|
|||
|
|
height: 1080px;
|
|||
|
|
background: #f1ead8;
|
|||
|
|
color: #1a1d2b;
|
|||
|
|
}
|
|||
|
|
.video-region {
|
|||
|
|
left: 1432px;
|
|||
|
|
top: 28px;
|
|||
|
|
width: 460px;
|
|||
|
|
height: 258px;
|
|||
|
|
background: #1a1f2e;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 14px;
|
|||
|
|
box-shadow:
|
|||
|
|
0 24px 60px -20px rgba(0, 0, 0, 0.45),
|
|||
|
|
0 0 0 4px rgba(255, 255, 255, 0.7),
|
|||
|
|
0 0 0 5px rgba(0, 0, 0, 0.18);
|
|||
|
|
background-image: repeating-linear-gradient(
|
|||
|
|
45deg,
|
|||
|
|
transparent 0 12px,
|
|||
|
|
rgba(255, 255, 255, 0.05) 12px 13px
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
.label {
|
|||
|
|
padding: 12px 18px;
|
|||
|
|
border: 1.5px solid currentColor;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.v-label {
|
|||
|
|
font:
|
|||
|
|
600 14px/1 ui-monospace,
|
|||
|
|
monospace;
|
|||
|
|
letter-spacing: 0.14em;
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
border: 1px solid currentColor;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="stage">
|
|||
|
|
<div class="region card-region"><span class="label">CARD · 1920×1080 (full-bleed)</span></div>
|
|||
|
|
<div class="region video-region"><span class="v-label">VIDEO · 460×258 PIP</span></div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|