Spaces:

soiz1
/

Radio-Exercise_No.1

Running

File size: 12,544 Bytes

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>動画プレイヤー</title>
<style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #0a0a12;
      color: #00ffcc;
      font-family: 'Courier New', monospace;
      padding: 20px;
      margin: 0;
    }

    h1 {
      color: #00aaff;
      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 {
      display: flex;
      flex-direction: column;
      gap: 15px;
      width: 100%;
      max-width: 800px;
      background-color: #0f0f1a;
      padding: 20px;
      border: 1px solid #0066ff;
      box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
    }

    .control-group {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: nowrap;
    }

    .control-group label {
      white-space: nowrap;
      min-width: 100px;
      text-align: right;
      color: #00ccff;
    }

    input[type="range"] {
      flex-grow: 1;
      -webkit-appearance: none;
      height: 8px;
      background: #001133;
      border-radius: 5px;
      outline: none;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      background: #00aaff;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 5px #00aaff;
    }

    input[type="number"], select {
      background-color: #001133;
      color: #00ccff;
      border: 1px solid #0066ff;
      padding: 5px;
      font-family: 'Courier New', monospace;
    }

    button {
      background-color: #001133;
      color: #00ccff;
      border: 1px solid #0066ff;
      padding: 8px 15px;
      cursor: pointer;
      font-family: 'Courier New', monospace;
      transition: all 0.3s;
      align-self: flex-start;
    }

    button:hover {
      background-color: #0066ff;
      color: #000;
      box-shadow: 0 0 10px #0066ff;
    }

    select {
      width: 300px;
      background-color: #001133;
      color: #00ccff;
      border: 1px solid #0066ff;
      padding: 5px;
    }

    input[type="checkbox"] {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      background: #001133;
      border: 1px solid #0066ff;
      position: relative;
    }

    input[type="checkbox"]:checked {
      background: #0066ff;
      box-shadow: 0 0 5px #0066ff;
    }

    input[type="checkbox"]:checked::after {
      content: "✓";
      position: absolute;
      color: #000;
      font-size: 14px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1>
  
  <div class="controls">
    <div class="control-group">
      <label for="videoSelect">動画の音量：</label>
      <select id="videoSelect">
        <option value="v.mp4">小</option>
        <option value="v-2.mp4">大(+50dB)</option>
      </select>
    </div>
    <div class="control-group">
      <label for="speedRange">再生速度：</label>
      <input type="range" id="speedRange" min="0.0001" max="20" step="0.0001" value="1" style="width:700px !important;">
      <input type="number" id="speedInput" min="0.0001" step="0.0001" value="1">
    </div>

    <div class="control-group">
      <label for="volumeRange">音量：</label>
      <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1">
      <input type="number" id="volumeInput" min="0" max="1" step="0.01" value="1">
    </div>

    <div class="control-group">
      <label for="loopCheckbox">ループ再生：</label>
      <input type="checkbox" id="loopCheckbox" checked>
    </div>

    <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 speedRange = document.getElementById('speedRange');
  const speedInput = document.getElementById('speedInput');
  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);
    speedInput.value = speed;
    speedRange.value = speed;
    video.playbackRate = speed;
  }

  function updateVolume(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() {
    const selected = videoSelect.value;

    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 => {
    speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value));
    volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value));
  });

  speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value));
  volumeInput.addEventListener('input', () => updateVolume(volumeInput.value));

  loopCheckbox.addEventListener('change', () => {
    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>
</html>