mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 21:57:29 +00:00
142 lines
5.5 KiB
HTML
142 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>HTML Minimal Ejected</title>
|
|
<link rel="preconnect" href="https://rsms.me/" />
|
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
|
<style>
|
|
body {
|
|
font-family:
|
|
InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
'Noto Color Emoji';
|
|
margin: 0;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
|
|
<h1>Minimal Skin (ejected)</h1>
|
|
<a href="/">← Back to index</a>
|
|
<video-provider style="display: block">
|
|
<media-container
|
|
style="
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0.75rem;
|
|
max-width: 960px;
|
|
margin: 2rem auto;
|
|
aspect-ratio: 16/9;
|
|
"
|
|
>
|
|
<video
|
|
slot="media"
|
|
src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
|
|
playsinline
|
|
poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
|
|
></video>
|
|
|
|
<div class="overlay"></div>
|
|
|
|
<div class="control-bar">
|
|
<!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
|
|
|
|
<media-play-button commandfor="play-tooltip" class="button">
|
|
<media-play-icon class="icon play-icon"></media-play-icon>
|
|
<media-pause-icon class="icon pause-icon"></media-pause-icon>
|
|
</media-play-button>
|
|
<media-tooltip
|
|
id="play-tooltip"
|
|
class="popup-animation"
|
|
popover="manual"
|
|
delay="500"
|
|
side="top"
|
|
side-offset="6"
|
|
collision-padding="12"
|
|
>
|
|
<span class="tooltip play-tooltip">Play</span>
|
|
<span class="tooltip pause-tooltip">Pause</span>
|
|
</media-tooltip>
|
|
|
|
<div class="time-display-group">
|
|
<!-- Use the show-remaining attribute to show count down/remaining time -->
|
|
<media-current-time-display></media-current-time-display>
|
|
|
|
<span class="duration-display">
|
|
/
|
|
<media-duration-display></media-duration-display>
|
|
</span>
|
|
</div>
|
|
|
|
<media-time-slider commandfor="time-slider-tooltip" class="slider">
|
|
<media-time-slider-track class="slider-track">
|
|
<media-time-slider-progress class="slider-progress"></media-time-slider-progress>
|
|
<media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
|
|
</media-time-slider-track>
|
|
<media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
|
|
</media-time-slider>
|
|
<media-tooltip
|
|
id="time-slider-tooltip"
|
|
class="popup-animation"
|
|
popover="manual"
|
|
track-cursor-axis="x"
|
|
side="top"
|
|
side-offset="12"
|
|
collision-padding="12"
|
|
>
|
|
<media-preview-time-display></media-preview-time-display>
|
|
</media-tooltip>
|
|
|
|
<div class="button-group">
|
|
<media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
|
|
<media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
|
|
<media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
|
|
<media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
|
|
</media-mute-button>
|
|
<media-popover
|
|
id="volume-slider-popover"
|
|
class="popup-animation"
|
|
popover="manual"
|
|
open-on-hover
|
|
delay="200"
|
|
close-delay="100"
|
|
side="top"
|
|
side-offset="2"
|
|
collision-padding="12"
|
|
>
|
|
<media-volume-slider class="slider" orientation="vertical">
|
|
<media-volume-slider-track class="slider-track">
|
|
<media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
|
|
</media-volume-slider-track>
|
|
<media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
|
|
</media-volume-slider>
|
|
</media-popover>
|
|
|
|
<media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
|
|
<media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
|
|
<media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-alt-icon>
|
|
</media-fullscreen-button>
|
|
<media-tooltip
|
|
id="fullscreen-tooltip"
|
|
class="popup-animation"
|
|
popover="manual"
|
|
delay="500"
|
|
side="top"
|
|
side-offset="6"
|
|
collision-padding="12"
|
|
>
|
|
<span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
|
|
<span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
|
|
</media-tooltip>
|
|
</div>
|
|
</div>
|
|
</media-container>
|
|
</video-provider>
|
|
<script type="module" src="/src/minimal-eject.ts"></script>
|
|
</body>
|
|
</html>
|