Update index.html

index.html

@@ -1129,27 +1129,46 @@ 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 (!document.pictureInPictureElement && !video.paused) {
+      // 他タブに移動 → PiP表示
+      // 動画が停止していれば再生再開
+      if (video.paused) {
         try {
-          await video.requestPictureInPicture();
-        } catch (err) {
-          console.error('PiP開始失敗:', err);
+          await video.play();
+        } catch (e) {
+          console.warn('再生エラー:', e);
         }
       }
+      enterPiP();
     } else {
-      // ページに戻ってきたとき → PiPを閉じる
-      if (document.pictureInPictureElement) {
-        try {
-          await document.exitPictureInPicture();
-        } catch (err) {
-          console.error('PiP終了失敗:', err);
-        }
-      }
+      // タブに戻ったとき → 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');