Hugging Face's logo

Spaces:
soiz1
/
Radio-Exercise_No.1
Running

App Files Community
soiz1 commited on
Commit
13afb0d
·
verified ·
1 Parent(s): 5d4dad4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +50 -23
index.html CHANGED
@@ -19,52 +19,79 @@
19
  }
20
  .controls {
21
  display: flex;
 
 
 
 
 
 
 
 
 
22
  gap: 10px;
23
- flex-wrap: wrap;
24
- justify-content: center;
25
  }
26
- button, select {
27
- padding: 5px 10px;
28
- font-size: 16px;
 
 
29
  }
30
  </style>
31
  </head>
32
  <body>
33
  <h1>動画プレイヤー</h1>
34
- <video id="videoPlayer" src="v.mp4" controls loop></video>
35
 
36
  <div class="controls">
37
- <label for="speedSelect">再生速度：</label>
38
- <select id="speedSelect">
39
- <option value="0.5">0.5x</option>
40
- <option value="1" selected>1x</option>
41
- <option value="1.5">1.5x</option>
42
- <option value="2">2x</option>
43
- </select>
 
 
 
44
 
45
- <button onclick="toggleLoop()">ループ切替</button>
46
  <button onclick="goFullscreen()">全画面</button>
47
  </div>
48
 
49
  <script>
50
  const video = document.getElementById('videoPlayer');
51
- const speedSelect = document.getElementById('speedSelect');
 
 
52
 
53
- speedSelect.addEventListener('change', () => {
54
- video.playbackRate = parseFloat(speedSelect.value);
 
 
 
 
 
 
55
  });
56
 
57
- function toggleLoop() {
58
- video.loop = !video.loop;
59
- alert(`ループは ${video.loop ? '有効' : '無効'} になりました`);
60
- }
 
 
 
 
 
 
 
61
 
 
62
  function goFullscreen() {
63
  if (video.requestFullscreen) {
64
  video.requestFullscreen();
65
- } else if (video.webkitRequestFullscreen) { // Safari対応
66
  video.webkitRequestFullscreen();
67
- } else if (video.msRequestFullscreen) { // IE対応
68
  video.msRequestFullscreen();
69
  }
70
  }
 
19
  }
20
  .controls {
21
  display: flex;
22
+ flex-direction: column;
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"] {
34
+ flex: 1;
35
+ }
36
+ input[type="number"] {
37
+ width: 60px;
38
  }
39
  </style>
40
  </head>
41
  <body>
42
  <h1>動画プレイヤー</h1>
43
+ <video id="videoPlayer" src="v.mp4" controls></video>
44
 
45
  <div class="controls">
46
+ <div class="control-group">
47
+ <label for="speedRange">再生速度：</label>
48
+ <input type="range" id="speedRange" min="0.000001" max="5" step="0.000001" value="1">
49
+ <input type="number" id="speedInput" min="0.000001" step="0.0000001" value="1">
50
+ </div>
51
+
52
+ <div class="control-group">
53
+ <label for="loopCheckbox">ループ再生：</label>
54
+ <input type="checkbox" id="loopCheckbox" checked>
55
+ </div>
56
 
 
57
  <button onclick="goFullscreen()">全画面</button>
58
  </div>
59
 
60
  <script>
61
  const video = document.getElementById('videoPlayer');
62
+ const speedRange = document.getElementById('speedRange');
63
+ const speedInput = document.getElementById('speedInput');
64
+ const loopCheckbox = document.getElementById('loopCheckbox');
65
 
66
+ // 初期値設定
67
+ video.playbackRate = parseFloat(speedRange.value);
68
+ video.loop = loopCheckbox.checked;
69
+
70
+ // スライダーと数値入力の連携
71
+ speedRange.addEventListener('input', () => {
72
+ speedInput.value = speedRange.value;
73
+ video.playbackRate = parseFloat(speedRange.value);
74
  });
75
 
76
+ speedInput.addEventListener('input', () => {
77
+ let value = parseFloat(speedInput.value);
78
+ speedInput.value = value;
79
+ speedRange.value = value;
80
+ video.playbackRate = value;
81
+ });
82
+
83
+ // ループ切り替え
84
+ loopCheckbox.addEventListener('change', () => {
85
+ video.loop = loopCheckbox.checked;
86
+ });
87
 
88
+ // 全画面表示
89
  function goFullscreen() {
90
  if (video.requestFullscreen) {
91
  video.requestFullscreen();
92
+ } else if (video.webkitRequestFullscreen) {
93
  video.webkitRequestFullscreen();
94
+ } else if (video.msRequestFullscreen) {
95
  video.msRequestFullscreen();
96
  }
97
  }