Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

soiz1 commited on 26 days ago

Commit

eb2d501

verified ·

1 Parent(s): 47f161c

Update index.html

Browse files

Files changed (1) hide show

index.html +233 -24

index.html CHANGED Viewed

@@ -20,14 +20,126 @@
       text-shadow: 0 0 5px #0066ff;
       border-bottom: 1px solid #0066ff;
       padding-bottom: 10px;
     }
     video {
-      max-width: 100%;
-      height: auto;
       margin-bottom: 10px;
-      border: 2px solid #0066ff;
-      box-shadow: 0 0 10px #0066ff;
     }
     .controls {
@@ -110,13 +222,6 @@
       padding: 5px;
     }
-    .video-selector {
-      margin-top: 15px;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
     input[type="checkbox"] {
       -webkit-appearance: none;
       width: 18px;
@@ -141,7 +246,6 @@
       transform: translate(-50%, -50%);
     }
   </style>
 </head>
 <body>
   <h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1>
@@ -174,7 +278,28 @@
     <button onclick="goFullscreen()">全画面</button>
   </div>
-  <video id="videoPlayer" src="v.mp4" controls></video>
 <script>
   const video = document.getElementById('videoPlayer');
   const videoSelect = document.getElementById('videoSelect');
@@ -183,6 +308,17 @@
   const volumeRange = document.getElementById('volumeRange');
   const volumeInput = document.getElementById('volumeInput');
   const loopCheckbox = document.getElementById('loopCheckbox');
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
@@ -195,7 +331,17 @@
     const volume = parseFloat(value);
     volumeInput.value = volume;
     volumeRange.value = volume;
     video.volume = volume;
   }
   function handleVideoChange() {
@@ -204,16 +350,75 @@
     if (selected === 'v-2.mp4') {
       const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
       if (!confirmPlay) {
-        videoSelect.value = video.src.split('/').pop(); // 元に戻す
         return;
       }
     }
     video.src = selected;
     video.load();
-    video.play();
   }
   videoSelect.addEventListener('change', handleVideoChange);
   ['input', 'change', 'mouseup'].forEach(eventName => {
@@ -228,20 +433,24 @@
     video.loop = loopCheckbox.checked;
   });
-  function goFullscreen() {
-    if (video.requestFullscreen) {
-      video.requestFullscreen();
-    } else if (video.webkitRequestFullscreen) {
-      video.webkitRequestFullscreen();
-    } else if (video.msRequestFullscreen) {
-      video.msRequestFullscreen();
-    }
-  }
   video.addEventListener('loadedmetadata', () => {
     updatePlaybackRate(speedRange.value);
     updateVolume(volumeRange.value);
     video.loop = loopCheckbox.checked;
   });
 </script>
 </body>

       text-shadow: 0 0 5px #0066ff;
       border-bottom: 1px solid #0066ff;
       padding-bottom: 10px;
+      text-align: center;
+    }
+    .video-container {
+      position: relative;
+      max-width: 800px;
+      margin-bottom: 20px;
+      border: 2px solid #0066ff;
+      box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
+      background: #000;
     }
     video {
+      width: 100%;
+      display: block;
+    }
+    /* カスタム動画コントロール */
+    video::-webkit-media-controls {
+      display: none !important;
+    }
+    .custom-controls {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: linear-gradient(to top, rgba(0, 20, 40, 0.9), transparent);
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .video-container:hover .custom-controls {
+      opacity: 1;
+    }
+    .progress-container {
+      width: 100%;
+      height: 8px;
+      background: #001133;
       margin-bottom: 10px;
+      cursor: pointer;
+    }
+    .progress-bar {
+      height: 100%;
+      background: #00aaff;
+      width: 0%;
+      position: relative;
+    }
+    .progress-bar::after {
+      content: '';
+      position: absolute;
+      right: -5px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 10px;
+      height: 10px;
+      background: #00ccff;
+      border-radius: 50%;
+      box-shadow: 0 0 5px #00ccff;
+    }
+    .buttons-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .left-controls, .right-controls {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+    }
+    .control-btn {
+      background: none;
+      border: none;
+      color: #00ccff;
+      font-size: 16px;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+    .control-btn:hover {
+      color: #00ffcc;
+      text-shadow: 0 0 5px #00ffcc;
+    }
+    .time-display {
+      font-size: 14px;
+      color: #00aaff;
+      font-family: 'Courier New', monospace;
+    }
+    .volume-container {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .volume-slider {
+      width: 80px;
+      -webkit-appearance: none;
+      height: 4px;
+      background: #001133;
+      outline: none;
+    }
+    .volume-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 12px;
+      height: 12px;
+      background: #00aaff;
+      border-radius: 50%;
+      cursor: pointer;
     }
     .controls {
       padding: 5px;
     }
     input[type="checkbox"] {
       -webkit-appearance: none;
       width: 18px;
       transform: translate(-50%, -50%);
     }
   </style>
 </head>
 <body>
   <h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1>
     <button onclick="goFullscreen()">全画面</button>
   </div>
+  <div class="video-container">
+    <video id="videoPlayer" src="v.mp4"></video>
+    <div class="custom-controls">
+      <div class="progress-container" id="progressContainer">
+        <div class="progress-bar" id="progressBar"></div>
+      </div>
+      <div class="buttons-container">
+        <div class="left-controls">
+          <button class="control-btn" id="playPauseBtn">▶</button>
+          <span class="time-display" id="timeDisplay">00:00 / 00:00</span>
+        </div>
+        <div class="right-controls">
+          <div class="volume-container">
+            <button class="control-btn" id="volumeBtn">🔊</button>
+            <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="1">
+          </div>
+          <button class="control-btn" id="fullscreenBtn">⛶</button>
+        </div>
+      </div>
+    </div>
+  </div>
 <script>
   const video = document.getElementById('videoPlayer');
   const videoSelect = document.getElementById('videoSelect');
   const volumeRange = document.getElementById('volumeRange');
   const volumeInput = document.getElementById('volumeInput');
   const loopCheckbox = document.getElementById('loopCheckbox');
+  const playPauseBtn = document.getElementById('playPauseBtn');
+  const progressBar = document.getElementById('progressBar');
+  const progressContainer = document.getElementById('progressContainer');
+  const timeDisplay = document.getElementById('timeDisplay');
+  const volumeBtn = document.getElementById('volumeBtn');
+  const volumeSlider = document.getElementById('volumeSlider');
+  const fullscreenBtn = document.getElementById('fullscreenBtn');
+  // 初期設定
+  video.controls = false;
+  let isDragging = false;
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
     const volume = parseFloat(value);
     volumeInput.value = volume;
     volumeRange.value = volume;
+    volumeSlider.value = volume;
     video.volume = volume;
+    // 音量ボタンのアイコン更新
+    if (volume === 0) {
+      volumeBtn.textContent = '🔇';
+    } else if (volume < 0.5) {
+      volumeBtn.textContent = '🔈';
+    } else {
+      volumeBtn.textContent = '🔊';
+    }
   }
   function handleVideoChange() {
     if (selected === 'v-2.mp4') {
       const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
       if (!confirmPlay) {
+        videoSelect.value = video.src.split('/').pop();
         return;
       }
     }
     video.src = selected;
     video.load();
+    video.play().then(() => {
+      playPauseBtn.textContent = '⏸';
+    }).catch(e => console.log(e));
+  }
+  function togglePlayPause() {
+    if (video.paused) {
+      video.play();
+      playPauseBtn.textContent = '⏸';
+    } else {
+      video.pause();
+      playPauseBtn.textContent = '▶';
+    }
+  }
+  function updateProgress() {
+    const percent = (video.currentTime / video.duration) * 100;
+    progressBar.style.width = `${percent}%`;
+    // 時間表示更新
+    const currentMinutes = Math.floor(video.currentTime / 60);
+    const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
+    const durationMinutes = Math.floor(video.duration / 60);
+    const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');
+    timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
+  }
+  function setProgress(e) {
+    const width = progressContainer.clientWidth;
+    const clickX = e.offsetX;
+    const duration = video.duration;
+    video.currentTime = (clickX / width) * duration;
   }
+  function toggleMute() {
+    video.muted = !video.muted;
+    if (video.muted) {
+      volumeBtn.textContent = '🔇';
+      volumeSlider.value = 0;
+    } else {
+      updateVolume(video.volume);
+    }
+  }
+  function handleVolumeChange() {
+    video.muted = false;
+    updateVolume(volumeSlider.value);
+  }
+  function goFullscreen() {
+    const container = document.querySelector('.video-container');
+    if (container.requestFullscreen) {
+      container.requestFullscreen();
+    } else if (container.webkitRequestFullscreen) {
+      container.webkitRequestFullscreen();
+    } else if (container.msRequestFullscreen) {
+      container.msRequestFullscreen();
+    }
+  }
+  // イベントリスナー
   videoSelect.addEventListener('change', handleVideoChange);
   ['input', 'change', 'mouseup'].forEach(eventName => {
     video.loop = loopCheckbox.checked;
   });
+  playPauseBtn.addEventListener('click', togglePlayPause);
+  video.addEventListener('click', togglePlayPause);
+  video.addEventListener('play', () => playPauseBtn.textContent = '⏸');
+  video.addEventListener('pause', () => playPauseBtn.textContent = '▶');
+  video.addEventListener('timeupdate', updateProgress);
+  progressContainer.addEventListener('click', setProgress);
+  progressContainer.addEventListener('mousedown', () => isDragging = true);
+  document.addEventListener('mouseup', () => isDragging = false);
+  progressContainer.addEventListener('mousemove', (e) => isDragging && setProgress(e));
+  volumeBtn.addEventListener('click', toggleMute);
+  volumeSlider.addEventListener('input', handleVolumeChange);
+  fullscreenBtn.addEventListener('click', goFullscreen);
   video.addEventListener('loadedmetadata', () => {
     updatePlaybackRate(speedRange.value);
     updateVolume(volumeRange.value);
     video.loop = loopCheckbox.checked;
+    updateProgress();
   });
 </script>
 </body>