-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
55 lines (51 loc) · 1.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Baby's first HTML5 <video> element</title>
<script type="module" src="./src/index.ts"></script>
<script type="module" src="./demo/app.ts"></script>
</head>
<body>
<media-controller
style="max-width: 100%; max-height: 100%; aspect-ratio: 16 / 9"
>
<baby-video slot="media"></baby-video>
<media-loading-indicator
slot="centered-chrome"
noautohide
></media-loading-indicator>
<media-control-bar>
<media-play-button></media-play-button>
<media-mute-button></media-mute-button>
<media-volume-range></media-volume-range>
<media-time-display showduration></media-time-display>
<media-time-range></media-time-range>
<media-playback-rate-button rates="-1 1"></media-playback-rate-button>
<media-fullscreen-button></media-fullscreen-button>
</media-control-bar>
</media-controller>
<p>
<a href="https://github.com/MattiasBuelens/baby-video"
>Source code on GitHub</a
>
</p>
<style>
media-mute-button + media-volume-range {
width: 0;
overflow: hidden;
padding-left: 0;
padding-right: 0;
/* Set the internal width so it reveals, not grows */
--media-range-track-width: 70px;
transition: width 0.2s ease-in;
}
/* Expand volume control when hovered or focused */
media-mute-button:is(:hover, :focus, :focus-within) + media-volume-range,
media-mute-button + media-volume-range:is(:hover, :focus, :focus-within) {
width: var(--media-range-track-width);
}
</style>
</body>
</html>