Spaces:

soiz1
/

sing-song-player-2uw9e28u

Running

App Files Files Community

soiz1 commited on Jul 1

Commit

59c8ec2

1 Parent(s): 687452b

Update index.html

Browse files

Files changed (1) hide show

index.html +100 -67

index.html CHANGED Viewed

@@ -161,43 +161,33 @@
         }
         .speed-control {
-            position: relative;
         }
-        .speed-button {
-            background: none;
-            border: none;
-            color: #e6f1ff;
-            font-size: 14px;
-            cursor: pointer;
-            padding: 5px 10px;
             border-radius: 3px;
         }
-        .speed-options {
-            position: absolute;
-            bottom: 100%;
-            left: 0;
-            background-color: #1e2a47;
-            border-radius: 5px;
-            padding: 5px 0;
-            display: none;
-            min-width: 80px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-        }
-        .speed-options.show {
-            display: block;
-        }
-        .speed-option {
-            padding: 5px 10px;
             cursor: pointer;
-            text-align: center;
         }
-        .speed-option:hover {
-            background-color: rgba(100, 255, 218, 0.2);
         }
         .fullscreen-button {
@@ -282,13 +272,34 @@
             background: linear-gradient(90deg, transparent, #64ffda, transparent);
             margin: 20px 0;
         }
     </style>
 </head>
 <body>
     <h1>高度な音声動画プレイヤー</h1>
     <div class="container">
-        <div class="video-container">
             <video id="video" muted>
                 <source src="v.mp4" type="video/mp4">
             </video>
@@ -305,17 +316,8 @@
                         <input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="1">
                     </div>
                     <div class="speed-control">
-                        <button class="speed-button" id="speed-btn">1x</button>
-                        <div class="speed-options" id="speed-options">
-                            <div class="speed-option" data-speed="0.25">0.25x</div>
-                            <div class="speed-option" data-speed="0.5">0.5x</div>
-                            <div class="speed-option" data-speed="0.75">0.75x</div>
-                            <div class="speed-option" data-speed="1">1x</div>
-                            <div class="speed-option" data-speed="1.25">1.25x</div>
-                            <div class="speed-option" data-speed="1.5">1.5x</div>
-                            <div class="speed-option" data-speed="2">2x</div>
-                            <div class="speed-option" data-speed="3">3x</div>
-                        </div>
                     </div>
                     <button class="control-button fullscreen-button" id="fullscreen-btn">⛶</button>
                 </div>
@@ -343,6 +345,11 @@
                 <input type="range" id="global-volume" min="0" max="3" step="0.1" value="1">
                 <span id="global-volume-value">1</span>
             </div>
         </div>
         <div class="tech-decoration"></div>
@@ -389,6 +396,7 @@
         document.addEventListener('DOMContentLoaded', function() {
             // 要素を取得
             const video = document.getElementById('video');
             const playPauseBtn = document.getElementById('play-pause-btn');
             const timeDisplay = document.getElementById('time-display');
             const progressContainer = document.getElementById('progress-container');
@@ -396,8 +404,10 @@
             const progressTime = document.getElementById('progress-time');
             const volumeBtn = document.getElementById('volume-btn');
             const volumeSlider = document.getElementById('volume-slider');
-            const speedBtn = document.getElementById('speed-btn');
-            const speedOptions = document.getElementById('speed-options');
             const fullscreenBtn = document.getElementById('fullscreen-btn');
             const playBtn = document.getElementById('play-btn');
             const pauseBtn = document.getElementById('pause-btn');
@@ -535,39 +545,61 @@
                 }
             }
-            // 再生速度コントロール
-            speedBtn.addEventListener('click', function() {
-                speedOptions.classList.toggle('show');
             });
-            // 再生速度オプション選択
-            document.querySelectorAll('.speed-option').forEach(option => {
-                option.addEventListener('click', function() {
-                    const speed = parseFloat(this.dataset.speed);
-                    video.playbackRate = speed;
-                    speedBtn.textContent = `${speed}x`;
-                    speedOptions.classList.remove('show');
-                    // 音声の再生速度も更新
-                    audioFiles.forEach(file => {
-                        if (audioSources[file]) {
-                            audioSources[file].playbackRate.value = speed;
-                        }
-                    });
-                });
             });
             // 全画面ボタン
             fullscreenBtn.addEventListener('click', function() {
-                if (video.requestFullscreen) {
-                    video.requestFullscreen();
-                } else if (video.webkitRequestFullscreen) {
-                    video.webkitRequestFullscreen();
-                } else if (video.msRequestFullscreen) {
-                    video.msRequestFullscreen();
                 }
             });
             // 音声ファイルを読み込む
             function loadAudioFiles() {
                 audioFiles.forEach(file => {
@@ -733,6 +765,7 @@
             loadAudioFiles();
             updateVolumeIcon();
             volumeSlider.value = video.volume;
         });
     </script>
 </body>

         }
         .speed-control {
+            display: flex;
+            align-items: center;
+            gap: 5px;
         }
+        .speed-slider {
+            width: 80px;
+            height: 6px;
+            -webkit-appearance: none;
+            background: #1e2a47;
             border-radius: 3px;
+            outline: none;
         }
+        .speed-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 12px;
+            height: 12px;
+            background: #64ffda;
+            border-radius: 50%;
             cursor: pointer;
         }
+        .speed-value {
+            font-size: 14px;
+            min-width: 30px;
+            text-align: center;
         }
         .fullscreen-button {
             background: linear-gradient(90deg, transparent, #64ffda, transparent);
             margin: 20px 0;
         }
+        /* 全画面時のスタイル */
+        .video-container:-webkit-full-screen {
+            width: 100%;
+            height: 100%;
+            background-color: black;
+        }
+        .video-container:-webkit-full-screen video {
+            width: 100%;
+            height: 100%;
+        }
+        .video-container:-webkit-full-screen .video-controls {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            width: 100%;
+            border-radius: 0;
+        }
     </style>
 </head>
 <body>
     <h1>高度な音声動画プレイヤー</h1>
     <div class="container">
+        <div class="video-container" id="video-container">
             <video id="video" muted>
                 <source src="v.mp4" type="video/mp4">
             </video>
                         <input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="1">
                     </div>
                     <div class="speed-control">
+                        <span class="speed-value" id="speed-value">1x</span>
+                        <input type="range" class="speed-slider" id="speed-slider" min="0.25" max="3" step="0.25" value="1">
                     </div>
                     <button class="control-button fullscreen-button" id="fullscreen-btn">⛶</button>
                 </div>
                 <input type="range" id="global-volume" min="0" max="3" step="0.1" value="1">
                 <span id="global-volume-value">1</span>
             </div>
+            <div class="setting-item">
+                <label for="settings-speed">再生速度:</label>
+                <input type="range" id="settings-speed" min="0.25" max="3" step="0.25" value="1">
+                <span id="settings-speed-value">1x</span>
+            </div>
         </div>
         <div class="tech-decoration"></div>
         document.addEventListener('DOMContentLoaded', function() {
             // 要素を取得
             const video = document.getElementById('video');
+            const videoContainer = document.getElementById('video-container');
             const playPauseBtn = document.getElementById('play-pause-btn');
             const timeDisplay = document.getElementById('time-display');
             const progressContainer = document.getElementById('progress-container');
             const progressTime = document.getElementById('progress-time');
             const volumeBtn = document.getElementById('volume-btn');
             const volumeSlider = document.getElementById('volume-slider');
+            const speedSlider = document.getElementById('speed-slider');
+            const speedValue = document.getElementById('speed-value');
+            const settingsSpeedSlider = document.getElementById('settings-speed');
+            const settingsSpeedValue = document.getElementById('settings-speed-value');
             const fullscreenBtn = document.getElementById('fullscreen-btn');
             const playBtn = document.getElementById('play-btn');
             const pauseBtn = document.getElementById('pause-btn');
                 }
             }
+            // 再生速度スライダー (動画プレイヤー)
+            speedSlider.addEventListener('input', function() {
+                const speed = parseFloat(this.value);
+                speedValue.textContent = `${speed}x`;
+                updatePlaybackRate(speed);
             });
+            // 再生速度スライダー (設定メニュー)
+            settingsSpeedSlider.addEventListener('input', function() {
+                const speed = parseFloat(this.value);
+                settingsSpeedValue.textContent = `${speed}x`;
+                speedSlider.value = speed;
+                speedValue.textContent = `${speed}x`;
+                updatePlaybackRate(speed);
             });
+            // 再生速度を更新
+            function updatePlaybackRate(speed) {
+                video.playbackRate = speed;
+                // 音声の再生速度も更新
+                audioFiles.forEach(file => {
+                    if (audioSources[file]) {
+                        audioSources[file].playbackRate.value = speed;
+                    }
+                });
+            }
             // 全画面ボタン
             fullscreenBtn.addEventListener('click', function() {
+                if (videoContainer.requestFullscreen) {
+                    videoContainer.requestFullscreen();
+                } else if (videoContainer.webkitRequestFullscreen) {
+                    videoContainer.webkitRequestFullscreen();
+                } else if (videoContainer.msRequestFullscreen) {
+                    videoContainer.msRequestFullscreen();
                 }
             });
+            // 全画面変更イベント
+            document.addEventListener('fullscreenchange', handleFullscreenChange);
+            document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+            document.addEventListener('msfullscreenchange', handleFullscreenChange);
+            function handleFullscreenChange() {
+                const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+                if (isFullscreen) {
+                    // 全画面時の処理
+                    video.controls = false;
+                } else {
+                    // 通常表示時の処理
+                    video.controls = false; // ブラウザのコントロールは非表示のまま
+                }
+            }
             // 音声ファイルを読み込む
             function loadAudioFiles() {
                 audioFiles.forEach(file => {
             loadAudioFiles();
             updateVolumeIcon();
             volumeSlider.value = video.volume;
+            video.controls = false; // ブラウザのコントロールを非表示
         });
     </script>
 </body>