Update index.html

index.html

@@ -608,6 +608,19 @@
 	        width: 100%;
 	    }
 	}
+
+      .frame-time {
+    position: absolute;
+    bottom: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: #00ccff;
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+}
 	</style>
 </head>
 
@@ -747,6 +760,7 @@
 				<div class="buttons-container">
 					<div class="left-controls">
 						<button class="control-btn" id="playPauseBtn">▶</button>
+                        <button class="control-btn" id="resetBtn">↻</button>
 						<span class="time-display" id="timeDisplay">00:00 / 00:00</span>
 					</div>
 					<div class="right-controls">
@@ -1093,7 +1107,21 @@
 	          document.getElementById('subtitleToggle').checked ^= true;
 	          toggleSubtitles();
 	        }
-	        
+	        // リセットボタンの要素を取得
+const resetBtn = document.getElementById('resetBtn');
+
+// リセットボタンのイベントリスナーを追加
+resetBtn.addEventListener('click', resetVideo);
+
+// 動画を最初から再生する関数
+function resetVideo() {
+    video.currentTime = 0;
+    if (video.paused) {
+        video.play();
+        playPauseBtn.textContent = '⏸';
+    }
+    hideContextMenu();
+}
 	        // フレームプレビュー関連
 	        function showFramePreview(e) {
 	          if (!videoBlob) return;
@@ -1104,9 +1132,10 @@
 	          const previewTime = (clickX / progressRect.width) * duration;
 	          
 	          // 時間表示を更新
-	          const previewMinutes = Math.floor(previewTime / 60);
-	          const previewSeconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
-	          frameTime.textContent = `${previewMinutes}:${previewSeconds}`;
+    const previewMinutes = Math.floor(previewTime / 60);
+    const previewSeconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
+    const previewMilliseconds = Math.floor((previewTime % 1) * 1000).toString().padStart(3, '0').substring(0, 2);
+    frameTime.textContent = `${previewMinutes}:${previewSeconds}.${previewMilliseconds}`;
 	          
 	          // プレビュー位置を更新
 	          framePreview.style.left = `${e.clientX}px`;