-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (147 loc) · 8.34 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Video Player</title>
<meta name="description" content="Accessible video player with custom controls.">
<link rel="stylesheet" href="./css/index.css">
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
<script src="./js/index.js" type="module"></script>
</head>
<body>
<a href="#main-content" class="element-invisible element-focusable skip-link">Skip to main content</a>
<form id="theme-picker" class="theme-picker">
<button type="button" id="btn-theme-toggle" class="btn-theme-toggle" aria-pressed="false">
<svg role="img" class="theme-icon" id="theme-darkmode">
<use href="./img/sprite.svg#moon"></use>
</svg>
<svg role="img" class="theme-icon hide" id="theme-lightmode">
<use href="./img/sprite.svg#sun"></use>
</svg>
<span>Dark Mode:</span> <span id="mode" class="mode"></span>
<span class="btn-theme-state" aria-hidden="true"></span>
</button>
</form>
<div class="page-layout">
<header class="page-header" id="page-header">
<svg role="img" class="icon-logo">
<use href="./img/sprite.svg#icon-logo"></use>
</svg>
<h1>Custom Video Player</h1>
</header>
<main class="main" id="main-content">
<div class="player" id="videoContainer">
<div class="video-wrapper paused" id="video-wrapper">
<video id="video" aria-label="Custom video" class="video" preload="metadata"
onloadstart="this.volume=0.15" controls
poster="https://iandevlin.github.io/mdn/video-player/img/poster.jpg">
<source
src="https://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4"
type="video/mp4">
<source
src="https://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.webm"
type="video/webm">
<source
src="https://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.ogg"
type="video/ogg">
<track id="video-track" kind="captions" src="./captions/captions.en.vtt" srclang="en"
label="English" />
<!-- Offer download -->
<a href="https://iandevlin.github.io/mdn/video-player/video/tears-of-steel-battle-clip-medium.mp4"
target="_blank" rel="noopener noreferrer">
Download MP4
</a>
</video>
</div>
<div class="video-controls-container">
<span class="visually-hidden">Progress bar - click inside to go back or
forward. For keyboard navigation hold down the Shift key then press either the 'arrow left'
or 'arrow right' key.</span>
<progress id="progress" value="0" min="0" class="progress" tabindex="0">
<span id="progress-bar"></span>
</progress>
<ul class="video-controls" role="list">
<li>
<button id="playpause" type="button" aria-label="play-pause">
<span id="playpause-text" class="visually-hidden">Play</span>
<svg role="img" class="icon icon-play-pause" data-play>
<use href="./img/video-controls-sprite.svg#icon-play"></use>
</svg>
<svg role="img" class="icon icon-play-pause hide" data-pause>
<use href="./img/video-controls-sprite.svg#icon-pause"></use>
</svg>
</button>
</li>
<li class="text-control">
<span class="visually-hidden" id="video-current-time">Current time</span><span
id="current-time" aria-describedby="video-current-time">00:00</span> / <span
class="visually-hidden" id="video-duration">Video duration</span><span id="duration"
aria-describedby="video-duration"></span>
</li>
<li class="text-control">
<span class="visually-hidden" id="skip-back">Go back 10 seconds</span>
<button data-skip="-10" aria-describedby="skip-back" type="button">« 10s</button>
<span class="visually-hidden" id="skip-forwards">Go forwards 25 seconds</span>
<button data-skip="25" aria-describedby="skip-forwards" type="button">25s »</button>
</li>
<li class="volume-controls">
<button class="btn-volume" id="btn-volume" type="button" aria-label="Volume">
<span class="visually-hidden" id="btn-volume-text">Muted</span>
</button>
<label for="range-volume" class="visually-hidden">
Drag slider to change volume
</label>
<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05"
value="0.15" id="range-volume">
</li>
<li class="captions">
<button id="captions" class="btn-captions" type="button" aria-label="Captions">
<span id="captions-text" class="visually-hidden">Captions off</span>
</button>
</li>
<li>
<button id="fs" type="button">
<span id="fullscreen-text" class="visually-hidden">Fullscreen</span>
<svg role="img" class="icon" data-fullscreen>
<use href="./img/video-controls-sprite.svg#icon-fullscreen"></use>
</svg>
<svg role="img" class="icon hide" data-exit-fullscreen>
<use href="./img/video-controls-sprite.svg#icon-exit-fullscreen"></use>
</svg>
</button>
</li>
</ul>
</div>
<div class="transcript-container">
<details class="transcript" id="transcript">
<summary aria-controls="#transcript" id="summary" aria-expanded="false">
<span id="summary-status">Open</span> transcript
</summary>
<ul>
<li>
<time>00:00:00.000</time> to <time>00:00:35.000</time>
<span>The soldiers battle the robots.</span>
</li>
<li>
<time>00:00:35.000</time> to <time>00:01:09.000</time>
<span>The robots battle the soldiers.</span>
</li>
<li>
<time>00:01:09.000</time> to <time>00:01:10.000</time>
<span>The soldiers defeat the robots.</span>
</li>
</ul>
</details>
</div>
</div>
</main>
<footer class="page-footer">
<ul role="list">
<li><a href="https://github.com/chrisnajman/custom-video-player" target="_blank"
rel="noopener noreferrer">GitHub Repository</a></li>
</ul>
</footer>
</div>
</body>
</html>