Update index.html

index.html

@@ -1129,46 +1129,6 @@ document.addEventListener('DOMContentLoaded', function() {
     video.preservesPitch = true;
     video.mozPreservesPitch = true; // Firefox用
     video.webkitPreservesPitch = true; // 古いWebKit用
-  async function enterPiP() {
-    if (!document.pictureInPictureElement && !video.paused) {
-      try {
-        await video.requestPictureInPicture();
-      } catch (err) {
-        console.warn('PiP開始失敗:', err);
-      }
-    }
-  }
-
-  async function exitPiP() {
-    if (document.pictureInPictureElement) {
-      try {
-        await document.exitPictureInPicture();
-      } catch (err) {
-        console.warn('PiP終了失敗:', err);
-      }
-    }
-  }
-
-  document.addEventListener('visibilitychange', async () => {
-    if (document.hidden) {
-      // 他タブに移動 → PiP表示
-      // 動画が停止していれば再生再開
-      if (video.paused) {
-        try {
-          await video.play();
-        } catch (e) {
-          console.warn('再生エラー:', e);
-        }
-      }
-      enterPiP();
-    } else {
-      // タブに戻ったとき → PiP終了
-      exitPiP();
-    }
-  });
-
-  // 動画終了時に自動的にPiPを閉じる（次回再開のため）
-  video.addEventListener('ended', exitPiP);
     const videoContainer = document.getElementById('video-container');
     const playPauseBtn = document.getElementById('play-pause-btn');
     const timeDisplay = document.getElementById('time-display');
@@ -1224,6 +1184,27 @@ document.addEventListener('DOMContentLoaded', function() {
     let currentPlaybackRate = 1;
     let isFullscreen = false;
 
+    async function enterPiP() {
+    if (!document.pictureInPictureElement && !video.paused) {
+      try {
+        await video.requestPictureInPicture();
+      } catch (err) {
+        console.warn('PiP開始失敗:', err);
+      }
+    }
+  }
+
+  async function exitPiP() {
+    if (document.pictureInPictureElement) {
+      try {
+        await document.exitPictureInPicture();
+      } catch (err) {
+        console.warn('PiP終了失敗:', err);
+      }
+    }
+  }
+
+  
     // 動画のバッファリング状態を監視
     video.addEventListener('waiting', function() {
         isBuffering = true;
@@ -1421,6 +1402,26 @@ document.addEventListener('DOMContentLoaded', function() {
             enablePlayerControls();
 
             previewSection.style.display = 'block';
+  document.addEventListener('visibilitychange', async () => {
+    if (document.hidden) {
+      // 他タブに移動 → PiP表示
+      // 動画が停止していれば再生再開
+      if (video.paused) {
+        try {
+          await video.play();
+        } catch (e) {
+          console.warn('再生エラー:', e);
+        }
+      }
+      enterPiP();
+    } else {
+      // タブに戻ったとき → PiP終了
+      exitPiP();
+    }
+  });
+
+  // 動画終了時に自動的にPiPを閉じる（次回再開のため）
+  video.addEventListener('ended', exitPiP);
             // 合成後に音量と再生速度を適用
             applyVolume();
             applyPlaybackRate();