-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
87 lines (84 loc) · 2.82 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dual Video Player</title>
<link rel="icon" href="img/favicon.png" type="image/png" sizes="16x16" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="theme.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body style="text-align: left">
<div id="player_div">
<div class="video_container">
<img
id="webcam_video"
alt="Webcam video placeholder"
src="img/webcam.jpg"
/>
<img id="main_video" alt="Main video placeholder" src="img/video.jpg" />
</div>
<div class="info_div">
<div class="description_div">
<p id="names_paragraph">
Video names:<br />Webcam.mp4<br />Video.mp4
</p>
<div id="time_div">
<button id="show_time_info_button" class="btn btn-light">
Show time info
</button>
<br />
<div id="time_info_div" style="display: none"></div>
</div>
</div>
<div id="options_div">
<button id="hide_webcam_button" class="btn btn-light">
Hide webcam video
</button>
<button id="hide_main_button" class="btn btn-light">
Hide main video
</button>
<button id="unlink_webcam_button" class="btn btn-light">
Freeze and unlink webcam video
</button>
<button id="set_offset_to_match_end_button" class="btn btn-light">
Set offset to match video end
</button>
<label for="offset_input">Video Offset (s):</label>
<input
type="number"
id="offset_input"
name="offset"
step="0.1"
min="-10000"
max="10000"
value="0"
/>
<label for="playback_speed_input">Playback Speed (multiplier):</label>
<input
type="number"
id="playback_speed_input"
name="playback_speed"
step="0.1"
min="0.1"
max="5"
value="1"
/>
<label for="swap_button">Swap videos:</label>
<button id="swap_button" class="btn btn-light">
<img class="svg-icon" alt="swap icon" src="img/swap-icon.svg" />
</button>
<button id="dark_mode_button" class="btn btn-light">Dark Mode</button>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="dark-mode.js"></script>
</body>
</html>