メディア・画像
ビデオプレーヤー
グラデーションのポスター上に自作の動画プレーヤーUIを重ねる。中央の再生ボタン、クリックでシークできる進捗バー、経過/総時間、ミュート・全画面のアイコンが揃う。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
実際の音声・映像は使わず、JSのタイマーで進捗を進める疑似再生です。実装時は <video> 要素に置き換え、progress の更新を timeupdate、シークを currentTime、時間を duration/currentTime に、全画面を requestFullscreen() に差し替えてください。ポスターは background の linear-gradient でダミー表現しています。
コード（コピーして使えます）
<div class="vp" id="vp">
<div class="vp-poster" aria-hidden="true">
<div class="vp-orb"></div>
</div>
<button class="vp-center" id="vpCenter" aria-label="再生">
<svg class="vp-ic-play" width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M7 4.5v15l12-7.5-12-7.5z" fill="currentColor"/>
</svg>
<svg class="vp-ic-pause" width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<rect x="6" y="4.5" width="4" height="15" rx="1.2" fill="currentColor"/>
<rect x="14" y="4.5" width="4" height="15" rx="1.2" fill="currentColor"/>
</svg>
</button>
<div class="vp-bar">
<div
class="vp-seek"
id="vpSeek"
role="slider"
tabindex="0"
aria-label="再生位置"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="0"
>
<div class="vp-track">
<div class="vp-buffer"></div>
<div class="vp-fill" id="vpFill"></div>
<div class="vp-knob" id="vpKnob"></div>
</div>
</div>
<div class="vp-row">
<button class="vp-mini" id="vpToggle" aria-label="再生">
<svg class="vp-ic-play" width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M7 4.5v15l12-7.5-12-7.5z" fill="currentColor"/>
</svg>
<svg class="vp-ic-pause" width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<rect x="6" y="4.5" width="4" height="15" rx="1.2" fill="currentColor"/>
<rect x="14" y="4.5" width="4" height="15" rx="1.2" fill="currentColor"/>
</svg>
</button>
<span class="vp-time"><span id="vpCur">0:00</span> / <span id="vpDur">3:20</span></span>
<span class="vp-spacer"></span>
<button class="vp-mini" id="vpMute" aria-label="ミュート" aria-pressed="false">
<svg class="vp-ic-vol" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M4 9v6h3.5L12 19V5L7.5 9H4z" fill="currentColor"/>
<path d="M15.5 8.5a5 5 0 010 7M17.5 6a8.5 8.5 0 010 12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
<svg class="vp-ic-muted" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M4 9v6h3.5L12 19V5L7.5 9H4z" fill="currentColor"/>
<path d="M16 9.5l5 5M21 9.5l-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
</button>
<button class="vp-mini" id="vpFull" aria-label="全画面">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
</div>