mirror of
https://github.com/zoriya/v10.git
synced 2026-08-13 17:40:12 +00:00
chore(examples): remove -demo suffix on dir names
This commit is contained in:
Rahim
@@ -0,0 +1,141 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user