Update index.html

index.html

@@ -46,13 +46,106 @@
             width: 100%;
             border-radius: 5px;
             background-color: #000;
+            display: block;
         }
         
-        .controls {
+        .video-controls {
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 10px;
+            border-radius: 0 0 5px 5px;
             display: flex;
             flex-direction: column;
-            gap: 15px;
-            margin-bottom: 20px;
+            gap: 10px;
+        }
+        
+        .progress-container {
+            width: 100%;
+            height: 10px;
+            background-color: #1e2a47;
+            border-radius: 5px;
+            cursor: pointer;
+            position: relative;
+        }
+        
+        .progress-bar {
+            height: 100%;
+            background-color: #64ffda;
+            border-radius: 5px;
+            width: 0%;
+            position: relative;
+        }
+        
+        .progress-time {
+            position: absolute;
+            top: -25px;
+            background-color: rgba(0, 0, 0, 0.8);
+            padding: 2px 5px;
+            border-radius: 3px;
+            font-size: 12px;
+            display: none;
+        }
+        
+        .controls-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .left-controls, .right-controls {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .control-button {
+            background: none;
+            border: none;
+            color: #e6f1ff;
+            font-size: 16px;
+            cursor: pointer;
+            padding: 5px;
+            border-radius: 3px;
+            transition: all 0.2s;
+        }
+        
+        .control-button:hover {
+            background-color: rgba(100, 255, 218, 0.2);
+        }
+        
+        .time-display {
+            font-size: 14px;
+            color: #e6f1ff;
+            font-family: monospace;
+        }
+        
+        .volume-control {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        
+        .volume-slider {
+            width: 80px;
+            height: 5px;
+            -webkit-appearance: none;
+            background: #1e2a47;
+            border-radius: 5px;
+            outline: none;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+        
+        .volume-control:hover .volume-slider {
+            opacity: 1;
+        }
+        
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 12px;
+            height: 12px;
+            background: #64ffda;
+            border-radius: 50%;
+            cursor: pointer;
         }
         
         .audio-controls {
@@ -73,7 +166,7 @@
             color: #64ffda;
         }
         
-        input[type="range"] {
+        .audio-volume-slider {
             flex-grow: 1;
             height: 8px;
             -webkit-appearance: none;
@@ -82,7 +175,7 @@
             outline: none;
         }
         
-        input[type="range"]::-webkit-slider-thumb {
+        .audio-volume-slider::-webkit-slider-thumb {
             -webkit-appearance: none;
             width: 18px;
             height: 18px;
@@ -121,22 +214,6 @@
             border-radius: 3px;
         }
         
-        button {
-            background-color: #0a192f;
-            color: #64ffda;
-            border: 1px solid #64ffda;
-            padding: 10px 20px;
-            border-radius: 5px;
-            cursor: pointer;
-            font-weight: bold;
-            transition: all 0.3s;
-        }
-        
-        button:hover {
-            background-color: #64ffda;
-            color: #0a192f;
-        }
-        
         .buttons {
             display: flex;
             gap: 10px;
@@ -149,6 +226,33 @@
             background: linear-gradient(90deg, transparent, #64ffda, transparent);
             margin: 20px 0;
         }
+        
+        .fullscreen {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: black;
+            z-index: 1000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .fullscreen video {
+            width: 100%;
+            height: 100%;
+            max-width: 100%;
+            max-height: 100%;
+        }
+        
+        .fullscreen .video-container {
+            width: 100%;
+            height: 100%;
+            max-width: 100%;
+            max-height: 100%;
+        }
     </style>
 </head>
 <body>
@@ -159,6 +263,25 @@
             <video id="video" muted>
                 <source src="v.mp4" type="video/mp4">
             </video>
+            <div class="video-controls">
+                <div class="progress-container" id="progress-container">
+                    <div class="progress-bar" id="progress-bar"></div>
+                    <div class="progress-time" id="progress-time">00:00</div>
+                </div>
+                <div class="controls-row">
+                    <div class="left-controls">
+                        <button class="control-button" id="play-pause-btn">▶</button>
+                        <span class="time-display" id="time-display">00:00 / 00:00</span>
+                    </div>
+                    <div class="right-controls">
+                        <div class="volume-control">
+                            <button class="control-button" id="volume-btn">🔊</button>
+                            <input type="range" class="volume-slider" id="video-volume" min="0" max="1" step="0.01" value="1">
+                        </div>
+                        <button class="control-button" id="fullscreen-btn">⛶</button>
+                    </div>
+                </div>
+            </div>
         </div>
         
         <div class="tech-decoration"></div>
@@ -203,27 +326,27 @@
             <h2>音声コントロール</h2>
             <div class="audio-item">
                 <label>p.mp3</label>
-                <input type="range" class="volume-slider" data-audio="p" min="0" max="1" step="0.01" value="1">
+                <input type="range" class="audio-volume-slider" data-audio="p" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
             <div class="audio-item">
                 <label>a.mp3</label>
-                <input type="range" class="volume-slider" data-audio="a" min="0" max="1" step="0.01" value="1">
+                <input type="range" class="audio-volume-slider" data-audio="a" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
             <div class="audio-item">
                 <label>t.mp3</label>
-                <input type="range" class="volume-slider" data-audio="t" min="0" max="1" step="0.01" value="1">
+                <input type="range" class="audio-volume-slider" data-audio="t" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
             <div class="audio-item">
                 <label>s.mp3</label>
-                <input type="range" class="volume-slider" data-audio="s" min="0" max="1" step="0.01" value="1">
+                <input type="range" class="audio-volume-slider" data-audio="s" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
             <div class="audio-item">
                 <label>k.mp3</label>
-                <input type="range" class="volume-slider" data-audio="k" min="0" max="1" step="0.01" value="1">
+                <input type="range" class="audio-volume-slider" data-audio="k" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
         </div>
@@ -241,6 +364,15 @@
         document.addEventListener('DOMContentLoaded', function() {
             // 要素を取得
             const video = document.getElementById('video');
+            const playPauseBtn = document.getElementById('play-pause-btn');
+            const fullscreenBtn = document.getElementById('fullscreen-btn');
+            const progressContainer = document.getElementById('progress-container');
+            const progressBar = document.getElementById('progress-bar');
+            const progressTime = document.getElementById('progress-time');
+            const timeDisplay = document.getElementById('time-display');
+            const volumeBtn = document.getElementById('volume-btn');
+            const videoVolumeSlider = document.getElementById('video-volume');
+            
             const playBtn = document.getElementById('play-btn');
             const pauseBtn = document.getElementById('pause-btn');
             const stopBtn = document.getElementById('stop-btn');
@@ -250,7 +382,7 @@
             const playbackRateSelect = document.getElementById('playback-rate');
             const globalVolumeSlider = document.getElementById('global-volume');
             const globalVolumeValue = document.getElementById('global-volume-value');
-            const volumeSliders = document.querySelectorAll('.volume-slider');
+            const volumeSliders = document.querySelectorAll('.audio-volume-slider');
             const volumeValues = document.querySelectorAll('.volume-value');
             
             // 音声オブジェクトを作成
@@ -265,6 +397,8 @@
             // 初期化
             let videoDuration = 0;
             let isPlaying = false;
+            let isFullscreen = false;
+            let lastVolume = 1;
             
             // 動画のメタデータが読み込まれたら
             video.addEventListener('loadedmetadata', function() {
@@ -272,8 +406,25 @@
                 endTimeInput.value = videoDuration.toFixed(1);
                 endTimeInput.max = videoDuration;
                 startTimeInput.max = videoDuration - 0.1;
+                updateTimeDisplay();
             });
             
+            // 時間表示を更新
+            function updateTimeDisplay() {
+                const currentTime = video.currentTime;
+                const duration = video.duration;
+                
+                timeDisplay.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+                progressBar.style.width = `${(currentTime / duration) * 100}%`;
+            }
+            
+            // 時間をフォーマット (00:00形式)
+            function formatTime(seconds) {
+                const mins = Math.floor(seconds / 60);
+                const secs = Math.floor(seconds % 60);
+                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+            }
+            
             // 音声ファイルを読み込む
             function loadAudioFiles() {
                 audioFiles.forEach(file => {
@@ -319,7 +470,7 @@
                         source.buffer = audioBuffers[file];
                         
                         // ボリュームスライダーの値を取得
-                        const volumeSlider = document.querySelector(`.volume-slider[data-audio="${file}"]`);
+                        const volumeSlider = document.querySelector(`.audio-volume-slider[data-audio="${file}"]`);
                         const volume = parseFloat(volumeSlider.value) * globalVolume;
                         
                         // ゲインノードを設定
@@ -346,9 +497,12 @@
                 // 動画を再生
                 video.play();
                 isPlaying = true;
+                playPauseBtn.textContent = '⏸';
                 
                 // 終了時間に達したら停止
                 video.ontimeupdate = function() {
+                    updateTimeDisplay();
+                    
                     if (video.currentTime >= endTime) {
                         if (!loop) {
                             stopMedia();
@@ -372,18 +526,128 @@
                 });
                 
                 isPlaying = false;
+                playPauseBtn.textContent = '▶';
             }
             
             // 停止関数
             function stopMedia() {
                 pauseMedia();
                 video.currentTime = parseFloat(startTimeInput.value) || 0;
+                updateTimeDisplay();
             }
             
-            // イベントリスナーを設定
-            playBtn.addEventListener('click', playMedia);
-            pauseBtn.addEventListener('click', pauseMedia);
-            stopBtn.addEventListener('click', stopMedia);
+            // 再生/一時停止ボタンの切り替え
+            playPauseBtn.addEventListener('click', function() {
+                if (isPlaying) {
+                    pauseMedia();
+                } else {
+                    playMedia();
+                }
+            });
+            
+            // プログレスバークリックでシーク
+            progressContainer.addEventListener('click', function(e) {
+                if (!videoDuration) return;
+                
+                const rect = this.getBoundingClientRect();
+                const pos = (e.clientX - rect.left) / rect.width;
+                const seekTime = pos * videoDuration;
+                
+                video.currentTime = seekTime;
+                
+                if (!isPlaying) {
+                    updateTimeDisplay();
+                }
+            });
+            
+            // プログレスバー上でマウス移動時に時間を表示
+            progressContainer.addEventListener('mousemove', function(e) {
+                if (!videoDuration) return;
+                
+                const rect = this.getBoundingClientRect();
+                const pos = (e.clientX - rect.left) / rect.width;
+                const seekTime = pos * videoDuration;
+                
+                progressTime.textContent = formatTime(seekTime);
+                progressTime.style.left = `${e.clientX - rect.left}px`;
+                progressTime.style.display = 'block';
+            });
+            
+            progressContainer.addEventListener('mouseout', function() {
+                progressTime.style.display = 'none';
+            });
+            
+            // ボリュームコントロール
+            volumeBtn.addEventListener('click', function() {
+                if (video.volume > 0) {
+                    lastVolume = video.volume;
+                    video.volume = 0;
+                    videoVolumeSlider.value = 0;
+                    volumeBtn.textContent = '🔇';
+                } else {
+                    video.volume = lastVolume;
+                    videoVolumeSlider.value = lastVolume;
+                    volumeBtn.textContent = lastVolume > 0.5 ? '🔊' : '🔉';
+                }
+            });
+            
+            videoVolumeSlider.addEventListener('input', function() {
+                const volume = parseFloat(this.value);
+                video.volume = volume;
+                lastVolume = volume;
+                
+                if (volume === 0) {
+                    volumeBtn.textContent = '🔇';
+                } else if (volume > 0.5) {
+                    volumeBtn.textContent = '🔊';
+                } else {
+                    volumeBtn.textContent = '🔉';
+                }
+            });
+            
+            // フルスクリーン
+            fullscreenBtn.addEventListener('click', function() {
+                if (!isFullscreen) {
+                    enterFullscreen();
+                } else {
+                    exitFullscreen();
+                }
+            });
+            
+            function enterFullscreen() {
+                const elem = video.parentElement;
+                
+                if (elem.requestFullscreen) {
+                    elem.requestFullscreen();
+                } else if (elem.webkitRequestFullscreen) {
+                    elem.webkitRequestFullscreen();
+                } else if (elem.msRequestFullscreen) {
+                    elem.msRequestFullscreen();
+                }
+                
+                isFullscreen = true;
+            }
+            
+            function exitFullscreen() {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+                
+                isFullscreen = false;
+            }
+            
+            // フルスクリーン状態の変更を監視
+            document.addEventListener('fullscreenchange', handleFullscreenChange);
+            document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+            document.addEventListener('msfullscreenchange', handleFullscreenChange);
+            
+            function handleFullscreenChange() {
+                isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+            }
             
             // ボリュームスライダーのイベント
             volumeSliders.forEach((slider, index) => {
@@ -406,7 +670,7 @@
                 if (isPlaying) {
                     audioFiles.forEach(file => {
                         if (gainNodes[file]) {
-                            const volumeSlider = document.querySelector(`.volume-slider[data-audio="${file}"]`);
+                            const volumeSlider = document.querySelector(`.audio-volume-slider[data-audio="${file}"]`);
                             const volume = parseFloat(volumeSlider.value) * value;
                             gainNodes[file].gain.value = volume;
                         }
@@ -414,6 +678,11 @@
                 }
             });
             
+            // 再生ボタン
+            playBtn.addEventListener('click', playMedia);
+            pauseBtn.addEventListener('click', pauseMedia);
+            stopBtn.addEventListener('click', stopMedia);
+            
             // 初期化
             loadAudioFiles();
         });