Video player
Reproductor de vídeo con poster y controles personalizados. Construido a partir de primitivos: no existe ningún componente VideoPlayer en OutfitKit. Es composición de un Card + Img con aspect 16/9 + overlay con Button de play + barra ProgressBar de control. Consulta el ejemplo completo en examples/mini-apps/video_player.html.
Composición: Card + wrapper relativo con Img aspect="16/9" + Button icon_only central absolutamente posicionado + barra de controles en el footer con Buttons + ProgressBar.
Copy
<div class="card" style="max-width:640px;width:100%;overflow:hidden">
<div style="position:relative;background:#000">
<div class="img" style="--aspect:16/9"><img src="https://picsum.photos/seed/v1/640/360" alt="Poster" loading="lazy"/></div>
<button class="btn brand lg icon" style="position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%"><iconify-icon icon="lucide:play" width="24"></iconify-icon></button>
</div>
<div class="body" style="display:flex;gap:10px;align-items:center">
<button class="btn ghost sm icon"><iconify-icon icon="lucide:play" width="16"></iconify-icon></button>
<span class="meta">00:30 / 01:48</span>
<div style="flex:1"><div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"><div class="progress-bar" style="width:30%"></div></div></div>
<button class="btn ghost sm icon"><iconify-icon icon="lucide:volume-2" width="16"></iconify-icon></button>
<button class="btn ghost sm icon"><iconify-icon icon="lucide:maximize" width="16"></iconify-icon></button>
</div>
</div>
Copy
<Card attrs={"style": "max-width:640px;overflow:hidden"}>
<div style="position:relative;background:#000">
<Img src="https://picsum.photos/seed/v1/640/360" aspect="16/9" alt="Poster" />
<Button icon="lucide:play" icon_only variant="brand" size="lg"
attrs={"style": "position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%"} />
</div>
<div class="body" style="display:flex;gap:10px;align-items:center">
<Button icon="lucide:play" icon_only variant="ghost" size="sm" />
<span class="meta">00:30 / 01:48</span>
<div style="flex:1"><ProgressBar value="30" /></div>
<Button icon="lucide:volume-2" icon_only variant="ghost" size="sm" />
<Button icon="lucide:maximize" icon_only variant="ghost" size="sm" />
</div>
</Card>
Copy
<Card attrs={"style": "max-width:640px;overflow:hidden"}>
<div style="position:relative;background:#000">
<Img src="https://picsum.photos/seed/v1/640/360" aspect="16/9" alt="Poster" />
<Button icon="lucide:play" icon_only variant="brand" size="lg"
attrs={"style": "position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%"} />
</div>
<div class="body" style="display:flex;gap:10px;align-items:center">
<Button icon="lucide:play" icon_only variant="ghost" size="sm" />
<span class="meta">00:30 / 01:48</span>
<div style="flex:1"><ProgressBar value="30" /></div>
<Button icon="lucide:volume-2" icon_only variant="ghost" size="sm" />
<Button icon="lucide:maximize" icon_only variant="ghost" size="sm" />
</div>
</Card>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Copy
<div class="card" style="max-width:640px;width:100%;overflow:hidden">
<div style="position:relative;background:#000">
<div class="img" style="--aspect:16/9"><img src="https://picsum.photos/seed/v2/640/360" alt="Frame" loading="lazy"/></div>
</div>
<div class="body" style="display:flex;gap:10px;align-items:center">
<button class="btn brand sm icon"><iconify-icon icon="lucide:pause" width="16"></iconify-icon></button>
<span class="meta">01:24 / 03:12</span>
<div style="flex:1"><div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45"><div class="progress-bar" style="width:45%"></div></div></div>
<button class="btn ghost sm icon"><iconify-icon icon="lucide:volume-2" width="16"></iconify-icon></button>
<button class="btn ghost sm icon"><iconify-icon icon="lucide:maximize" width="16"></iconify-icon></button>
</div>
</div>
Copy
<Card attrs={"style": "max-width:640px;overflow:hidden"}>
<div style="position:relative;background:#000">
<Img src="https://picsum.photos/seed/v2/640/360" aspect="16/9" alt="Frame" />
<!-- Sin overlay: está reproduciéndose -->
</div>
<div class="body" style="display:flex;gap:10px;align-items:center">
<Button icon="lucide:pause" icon_only variant="brand" size="sm" />
<span class="meta">01:24 / 03:12</span>
<div style="flex:1"><ProgressBar value="45" /></div>
<Button icon="lucide:volume-2" icon_only variant="ghost" size="sm" />
<Button icon="lucide:maximize" icon_only variant="ghost" size="sm" />
</div>
</Card>
Copy
<Card attrs={"style": "max-width:640px;overflow:hidden"}>
<div style="position:relative;background:#000">
<Img src="https://picsum.photos/seed/v2/640/360" aspect="16/9" alt="Frame" />
<!-- Sin overlay: está reproduciéndose -->
</div>
<div class="body" style="display:flex;gap:10px;align-items:center">
<Button icon="lucide:pause" icon_only variant="brand" size="sm" />
<span class="meta">01:24 / 03:12</span>
<div style="flex:1"><ProgressBar value="45" /></div>
<Button icon="lucide:volume-2" icon_only variant="ghost" size="sm" />
<Button icon="lucide:maximize" icon_only variant="ghost" size="sm" />
</div>
</Card>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />