-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
67 lines (62 loc) · 6.47 KB
/
demo.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>video-radio-star Web Component Demo</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<h1><code>video-radio-star</code> Web Component Demo</h1>
<p>Go back to the <a href="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/zachleat/video-radio-star/">repository on GitHub</a>.</p>
<h2>Simple</h2>
<video-radio-star class="demo-video" data-visible-autoplay>
<div class="demo-video-fluid">
<video src="./media/flower.mp4" muted loop controlsList="nodownload" playsinline disablePictureInPicture disableRemotePlayback>
<track default kind="captions" srclang="en" src="media/flower-en.vtt" label="English" />
<track kind="captions" srclang="es" src="media/flower-es.vtt" label="Español" />
</video>
<button type="button" data-mute class="demo-btn demo-mute" aria-label="Toggle Mute">
<svg width="33" height="33" viewBox="0 0 33 33" aria-hidden="true" focusable="false">
<path d="M15.4766 11.1643C15.5859 11.0549 15.75 10.9729 15.9414 10.9729C16.1055 10.9729 16.2695 11.0549 16.4062 11.1643C16.5156 11.301 16.5977 11.4651 16.5977 11.6292V20.8167C16.5977 21.0081 16.5156 21.1721 16.4062 21.2815C16.2695 21.4182 16.1055 21.4729 15.9414 21.4729C15.75 21.4729 15.5859 21.4182 15.4766 21.2815L13.043 18.8479H10.2539C10.0625 18.8479 9.89844 18.7932 9.78906 18.6565C9.65234 18.5471 9.59766 18.3831 9.59766 18.1917V14.2542C9.59766 14.0901 9.65234 13.926 9.78906 13.7893C9.89844 13.6799 10.0625 13.5979 10.2539 13.5979H13.043L15.4766 11.1643ZM22.2305 16.2229L23.4609 17.4807C23.543 17.5627 23.5977 17.6721 23.5977 17.7815C23.5977 17.9182 23.543 18.0276 23.4609 18.0823L22.832 18.7112C22.75 18.8206 22.6406 18.8479 22.5312 18.8479C22.3945 18.8479 22.2852 18.8206 22.2305 18.7112L20.9727 17.4807L19.7148 18.7112C19.6328 18.8206 19.5234 18.8479 19.4141 18.8479C19.2773 18.8479 19.168 18.8206 19.1133 18.7112L18.4844 18.0823C18.375 18.0276 18.3477 17.9182 18.3477 17.7815C18.3477 17.6721 18.375 17.5627 18.4844 17.4807L19.7148 16.2229L18.4844 14.9651C18.375 14.9104 18.3477 14.801 18.3477 14.6643C18.3477 14.5549 18.375 14.4456 18.4844 14.3635L19.1133 13.7346C19.168 13.6526 19.2773 13.5979 19.4141 13.5979C19.5234 13.5979 19.6328 13.6526 19.7148 13.7346L20.9727 14.9651L22.2305 13.7346C22.2852 13.6526 22.3945 13.5979 22.5312 13.5979C22.6406 13.5979 22.75 13.6526 22.832 13.7346L23.4609 14.3635C23.543 14.4456 23.5977 14.5549 23.5977 14.6643C23.5977 14.801 23.543 14.9104 23.4609 14.9651L22.2305 16.2229Z"/>
</svg>
</button>
</div>
</video-radio-star>
<h2>Kitchen Sink</h2>
<video-radio-star class="demo-video" data-visible-autoplay>
<div class="demo-video-fluid">
<video src="./media/flower.mp4" muted loop controlsList="nodownload" playsinline disablePictureInPicture disableRemotePlayback>
<track label="English" kind="captions" srclang="en" src="media/flower-en.vtt" />
<track label="Español" kind="captions" srclang="es" src="media/flower-es.vtt" />
</video>
<!--<button type="button" data-controls class="demo-btn demo-controls" aria-label="Toggle Mute">
<svg width="18" height="18" viewBox="340 140 280 279.416" aria-hidden="true" focusable="false">
<path d="M620,305.666v-51.333l-31.5-5.25c-2.333-8.75-5.833-16.917-9.917-23.917L597.25,199.5l-36.167-36.75l-26.25,18.083 c-7.583-4.083-15.75-7.583-23.916-9.917L505.667,140h-51.334l-5.25,31.5c-8.75,2.333-16.333,5.833-23.916,9.916L399.5,163.333 L362.75,199.5l18.667,25.666c-4.083,7.584-7.583,15.75-9.917,24.5l-31.5,4.667v51.333l31.5,5.25 c2.333,8.75,5.833,16.334,9.917,23.917l-18.667,26.25l36.167,36.167l26.25-18.667c7.583,4.083,15.75,7.583,24.5,9.917l5.25,30.916 h51.333l5.25-31.5c8.167-2.333,16.333-5.833,23.917-9.916l26.25,18.666l36.166-36.166l-18.666-26.25 c4.083-7.584,7.583-15.167,9.916-23.917L620,305.666z M480,333.666c-29.75,0-53.667-23.916-53.667-53.666s24.5-53.667,53.667-53.667 S533.667,250.25,533.667,280S509.75,333.666,480,333.666z"/>
</svg>
</button>-->
<button type="button" data-mute class="demo-btn demo-mute" aria-label="Toggle Mute">
<svg width="33" height="33" viewBox="0 0 33 33" aria-hidden="true" focusable="false">
<path d="M15.4766 11.1643C15.5859 11.0549 15.75 10.9729 15.9414 10.9729C16.1055 10.9729 16.2695 11.0549 16.4062 11.1643C16.5156 11.301 16.5977 11.4651 16.5977 11.6292V20.8167C16.5977 21.0081 16.5156 21.1721 16.4062 21.2815C16.2695 21.4182 16.1055 21.4729 15.9414 21.4729C15.75 21.4729 15.5859 21.4182 15.4766 21.2815L13.043 18.8479H10.2539C10.0625 18.8479 9.89844 18.7932 9.78906 18.6565C9.65234 18.5471 9.59766 18.3831 9.59766 18.1917V14.2542C9.59766 14.0901 9.65234 13.926 9.78906 13.7893C9.89844 13.6799 10.0625 13.5979 10.2539 13.5979H13.043L15.4766 11.1643ZM22.2305 16.2229L23.4609 17.4807C23.543 17.5627 23.5977 17.6721 23.5977 17.7815C23.5977 17.9182 23.543 18.0276 23.4609 18.0823L22.832 18.7112C22.75 18.8206 22.6406 18.8479 22.5312 18.8479C22.3945 18.8479 22.2852 18.8206 22.2305 18.7112L20.9727 17.4807L19.7148 18.7112C19.6328 18.8206 19.5234 18.8479 19.4141 18.8479C19.2773 18.8479 19.168 18.8206 19.1133 18.7112L18.4844 18.0823C18.375 18.0276 18.3477 17.9182 18.3477 17.7815C18.3477 17.6721 18.375 17.5627 18.4844 17.4807L19.7148 16.2229L18.4844 14.9651C18.375 14.9104 18.3477 14.801 18.3477 14.6643C18.3477 14.5549 18.375 14.4456 18.4844 14.3635L19.1133 13.7346C19.168 13.6526 19.2773 13.5979 19.4141 13.5979C19.5234 13.5979 19.6328 13.6526 19.7148 13.7346L20.9727 14.9651L22.2305 13.7346C22.2852 13.6526 22.3945 13.5979 22.5312 13.5979C22.6406 13.5979 22.75 13.6526 22.832 13.7346L23.4609 14.3635C23.543 14.4456 23.5977 14.5549 23.5977 14.6643C23.5977 14.801 23.543 14.9104 23.4609 14.9651L22.2305 16.2229Z"/>
</svg>
</button>
</div>
<p>
<button type="button" data-play>Play</button>
<button type="button" data-pause>Pause</button>
Toggle:
<button type="button" data-mute>Mute</button>
<button type="button" data-controls>Controls</button>
<button type="button" data-captions>Captions</button>
<button type="button" data-captions="en">Captions (English)</button>
<button type="button" data-captions="es">Captions (Español)</button>
<button type="button" data-mute data-captions>Mute + Captions</button>
</p>
<h3>Live English captions:</h3>
<p data-captions-content="en" aria-hidden="true"></p>
<p>Note that in-player captions are disabled by default in this example.</p>
</video-radio-star>
<script type="module" src="video-radio-star.js"></script>
</body>
</html>