feat: add control locking feature to player for improved user experience

css/styles.css

@@ -762,3 +762,18 @@ body {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
 }
+
+/* 锁定控制时屏蔽交互 */
+.player-container.controls-locked .dplayer-controller,
+.player-container.controls-locked .dplayer-mask,
+.player-container.controls-locked .dplayer-bar-wrap,
+.player-container.controls-locked .dplayer-statusbar,
+.player-container.controls-locked .shortcut-hint {
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+/* 保留锁按钮可见可点 */
+.player-container.controls-locked #lockToggle {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+}

player.html

@@ -159,7 +159,7 @@
 
     <main class="container mx-auto px-4 py-4">
         <!-- 视频播放区 -->
-        <div class="player-container">
+        <div id="playerContainer" class="player-container">
             <div class="relative">
                 <div id="player"></div>
                 <div class="loading-container" id="loading">
@@ -207,6 +207,14 @@
                     </svg>
                     <span id="orderText">倒序排列</span>
                 </button>
+                <button id="lockToggle" onclick="toggleControlsLock()" title="锁定控制" 
+                        class="px-2 py-1 bg-[#333] hover:bg-[#444] text-white rounded-full transition">
+                    <svg id="lockIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <!-- 默认状态：未锁图标 -->
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M15 11V7a3 3 0 00-6 0v4m-3 4h12v6H6v-6z" />
+                    </svg>
+                </button>
             </div>
         </div>
 
@@ -1323,6 +1331,18 @@
                 }, 3000);
             }, 10);
         }
+
+        let controlsLocked = false;
+        function toggleControlsLock() {
+            const container = document.getElementById('playerContainer');
+            controlsLocked = !controlsLocked;
+            container.classList.toggle('controls-locked', controlsLocked);
+            const icon = document.getElementById('lockIcon');
+            // 切换图标：锁 / 解锁
+            icon.innerHTML = controlsLocked
+                ? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d=\"M12 15v2m0-8V7a4 4 0 00-8 0v2m8 0H4v8h16v-8h-4z\"/>'
+                : '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d=\"M15 11V7a3 3 0 00-6 0v4m-3 4h12v6H6v-6z\"/>';
+        }
     </script>
 </body>
 </html>