fix: 禁用useCanvasPlayer后台解码+恢复所有video预加载

- useCanvasPlayer 新增 enabled 参数，enabled=false 时 hasSupport=false 且 init useEffect 直接 return，彻底不执行 WebCodecs 初始化和后台解码 - FrontendPreviewPlayer 传入 enabled=(useWebCodecs && !forceVideoFallback)， useWebCodecs=false 时 useCanvasPlayer 完全不启动，消除网页卡顿元凶 - 恢复所有 video 元素 preload=auto + src，撤掉条件预加载逻辑（之前条件预加载导致 switchToSegment 时频繁动态设 src，影响播放和进度）
2026-08-22 02:37:46 +08:00
parent b8a349d5e0
commit 4e9c9a2eda
2 changed files with 28 additions and 29 deletions
@@ -124,9 +124,10 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({

  const { state: canvasState, controls: canvasControls } = useCanvasPlayer(
    canvasRef,
-    canvasSegments,
+    useWebCodecs && !forceVideoFallback ? canvasSegments : [],
    useWebCodecs && !forceVideoFallback ? canvasTitle : undefined,
    handleCanvasError,
+    useWebCodecs && !forceVideoFallback,
  )

  // WebCodecs 报告解码失败时自动切换到 video fallback
@@ -365,33 +366,29 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({

      {/* ── Video 渲染层（默认路径，浏览器原生硬件解码） ── */}
      {!effectiveUseWebCodecs &&
-        segments.map((seg, i) => {
-          // 只预加载当前片段和下一个片段，其余延迟加载
-          const shouldPreload = i <= videoCurrentSegIdx + 1
-          return (
-            <video
-              key={seg.assetId}
-              muted
-              ref={(el) => {
-                videoRefs.current[i] = el
-              }}
-              preload={shouldPreload ? "auto" : "none"}
-              src={shouldPreload ? seg.videoUrl : undefined}
-              style={{
-                position: "absolute",
-                inset: 0,
-                width: "100%",
-                height: "100%",
-                objectFit: "contain",
-                background: "#000",
-                zIndex: 1,
-                opacity: i === videoCurrentSegIdx ? 1 : 0,
-                pointerEvents: i === videoCurrentSegIdx ? "auto" : "none",
-              }}
-              playsInline
-            />
-          )
-        })}
+        segments.map((seg, i) => (
+          <video
+            key={seg.assetId}
+            muted
+            ref={(el) => {
+              videoRefs.current[i] = el
+            }}
+            preload="auto"
+            src={seg.videoUrl}
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "contain",
+              background: "#000",
+              zIndex: 1,
+              opacity: i === videoCurrentSegIdx ? 1 : 0,
+              pointerEvents: i === videoCurrentSegIdx ? "auto" : "none",
+            }}
+            playsInline
+          />
+        ))}

      {/* 播放按钮 */}
      {!isPlaying && (
@@ -239,9 +239,10 @@ export function useCanvasPlayer(
    shadow?: boolean
  },
  onError?: (error: Error) => void,
+  enabled: boolean = true,
 ) {
  const [state, setState] = useState<CanvasPlayerState>({
-    hasSupport: isWebCodecsSupported(),
+    hasSupport: enabled && isWebCodecsSupported(),
    isPlaying: false,
    currentTime: 0,
    duration: 0,
@@ -909,6 +910,7 @@ export function useCanvasPlayer(

  // ── 初始化：加载并解码所有片段 ──
  useEffect(() => {
+    if (!enabled) return
    if (!state.hasSupport || segments.length === 0) {
      console.log("[useCanvasPlayer] Skip init:", {
        hasSupport: state.hasSupport,