Hugging Face's logo

Spaces:
soiz1
/
Radio-Exercise_No.1
Running

App Files Community
soiz1 commited on
Commit
7820aab
ยท
verified ยท
1 Parent(s): ff93379

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +12 -75
index.html CHANGED
@@ -8,9 +8,12 @@
8
  display: flex;
9
  flex-direction: column;
10
  align-items: center;
 
11
  background-color: #f0f0f0;
12
  font-family: sans-serif;
13
  padding: 20px;
 
 
14
  }
15
  video {
16
  max-width: 100%;
@@ -23,11 +26,12 @@
23
  gap: 15px;
24
  width: 100%;
25
  max-width: 500px;
 
26
  }
27
  .control-group {
28
  display: flex;
29
  align-items: center;
30
- justify-content: space-between;
31
  gap: 10px;
32
  }
33
  input[type="range"] {
@@ -36,6 +40,12 @@
36
  input[type="number"] {
37
  width: 60px;
38
  }
 
 
 
 
 
 
39
  </style>
40
  </head>
41
  <body>
@@ -70,77 +80,4 @@
70
  <option value="v.mp4">้€šๅธธ้Ÿณ้‡</option>
71
  <option value="v-2.mp4">ๅคง้Ÿณ้‡(50dBๅคงใใ„)</option>
72
  </select>
73
- </div>
74
-
75
-
76
- <script>
77
- const video = document.getElementById('videoPlayer');
78
- const videoSelect = document.getElementById('videoSelect');
79
- const speedRange = document.getElementById('speedRange');
80
- const speedInput = document.getElementById('speedInput');
81
- const volumeRange = document.getElementById('volumeRange');
82
- const volumeInput = document.getElementById('volumeInput');
83
- const loopCheckbox = document.getElementById('loopCheckbox');
84
-
85
- function updatePlaybackRate(value) {
86
- const speed = parseFloat(value);
87
- speedInput.value = speed;
88
- speedRange.value = speed;
89
- video.playbackRate = speed;
90
- }
91
-
92
- function updateVolume(value) {
93
- const volume = parseFloat(value);
94
- volumeInput.value = volume;
95
- volumeRange.value = volume;
96
- video.volume = volume;
97
- }
98
-
99
- function handleVideoChange() {
100
- const selected = videoSelect.value;
101
-
102
- if (selected === 'v-2.mp4') {
103
- const confirmPlay = confirm("ใ“ใฎๅ‹•็”ปใฏ้Ÿณ้‡ใŒๅคงใใ„ใงใ™ใ€‚ใ‚ใ‚‰ใ‹ใ˜ใ‚ใ€ใƒ‡ใƒใ‚คใ‚นใฎ้Ÿณ้‡ใ‚’ใ‚ใ‚‹็จ‹ๅบฆไธ‹ใ’ใฆใใ ใ•ใ„ใ€‚ใพใŸใ€้Ÿณๅ‰ฒใ‚ŒใŒ่ตทใใพใ™ใ€‚ๅ†็”Ÿใ—ใฆใ‚‚ใ‚ˆใ‚ใ—ใ„ใงใ™ใ‹๏ผŸ");
104
- if (!confirmPlay) {
105
- videoSelect.value = video.src.split('/').pop(); // ๅ…ƒใซๆˆปใ™
106
- return;
107
- }
108
- }
109
-
110
- video.src = selected;
111
- video.load();
112
- video.play();
113
- }
114
-
115
- videoSelect.addEventListener('change', handleVideoChange);
116
-
117
- ['input', 'change', 'mouseup'].forEach(eventName => {
118
- speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value));
119
- volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value));
120
- });
121
-
122
- speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value));
123
- volumeInput.addEventListener('input', () => updateVolume(volumeInput.value));
124
-
125
- loopCheckbox.addEventListener('change', () => {
126
- video.loop = loopCheckbox.checked;
127
- });
128
-
129
- function goFullscreen() {
130
- if (video.requestFullscreen) {
131
- video.requestFullscreen();
132
- } else if (video.webkitRequestFullscreen) {
133
- video.webkitRequestFullscreen();
134
- } else if (video.msRequestFullscreen) {
135
- video.msRequestFullscreen();
136
- }
137
- }
138
-
139
- video.addEventListener('loadedmetadata', () => {
140
- updatePlaybackRate(speedRange.value);
141
- updateVolume(volumeRange.value);
142
- video.loop = loopCheckbox.checked;
143
- });
144
- </script>
145
- </body>
146
- </html>
 
8
  display: flex;
9
  flex-direction: column;
10
  align-items: center;
11
+ justify-content: center;
12
  background-color: #f0f0f0;
13
  font-family: sans-serif;
14
  padding: 20px;
15
+ height: 100vh;
16
+ margin: 0;
17
  }
18
  video {
19
  max-width: 100%;
 
26
  gap: 15px;
27
  width: 100%;
28
  max-width: 500px;
29
+ text-align: center;
30
  }
31
  .control-group {
32
  display: flex;
33
  align-items: center;
34
+ justify-content: center;
35
  gap: 10px;
36
  }
37
  input[type="range"] {
 
40
  input[type="number"] {
41
  width: 60px;
42
  }
43
+ button {
44
+ margin-top: 10px;
45
+ }
46
+ select {
47
+ margin-top: 10px;
48
+ }
49
  </style>
50
  </head>
51
  <body>
 
80
  <option value="v.mp4">้€šๅธธ้Ÿณ้‡</option>
81
  <option value="v-2.mp4">ๅคง้Ÿณ้‡(50dBๅคงใใ„)</option>
82
  </select>
83
+ </div>