fix: FrontendPreviewPlayer video fallback 路径补充标题叠加层 (#1491)

2026-08-25 10:59:34 +08:00
parent 16bc4f53bf
commit dab88e0e66
1 changed files with 45 additions and 0 deletions
@@ -392,6 +392,51 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
          />
        ))}

+      {/* 标题CSS叠加层 — video fallback 路径也要渲染 */}
+      {titleSettings?.title && (
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            zIndex: 5,
+            display: "flex",
+            justifyContent: "center",
+            pointerEvents: "none",
+            ...(titleSettings.position === "top"
+              ? { top: "10%" }
+              : titleSettings.position === "center"
+                ? { top: "50%", transform: "translateY(-50%)" }
+                : { bottom: "15%" }),
+          }}
+        >
+          <span
+            style={{
+              fontSize: titleSettings.size,
+              fontFamily: titleSettings.font || "思源黑体",
+              color: titleSettings.color || "#ffffff",
+              fontWeight: titleSettings.bold ? 700 : 400,
+              fontStyle: titleSettings.italic ? "italic" : "normal",
+              textShadow: [
+                titleSettings.shadow ? "0 2px 8px rgba(0,0,0,0.7)" : undefined,
+                titleSettings.stroke
+                  ? "1px 1px 0 rgba(0,0,0,0.5), -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px 1px 0 rgba(0,0,0,0.5)"
+                  : undefined,
+                "0 1px 3px rgba(0,0,0,0.4)",
+              ]
+                .filter(Boolean)
+                .join(", "),
+              maxWidth: "90%",
+              textAlign: "center",
+              lineHeight: 1.3,
+              wordBreak: "break-word",
+            }}
+          >
+            {titleSettings.title}
+          </span>
+        </div>
+      )}
+
      {/* 播放按钮 */}
      {!isPlaying && (
        <button