fix: FrontendPreviewPlayer video fallback 路径补充标题叠加层 #1491
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user