HeroVideoDialog
hero-video-dialog点击封面缩略图，在模态浮层里播放视频
用法
基础用法
传缩略图 + 视频地址，点击缩略图弹出居中视频层（Esc / 点遮罩关闭）。videoSrc 指向视频文件时自动用原生播放器。
tsx
<HeroVideoDialog
thumbnailSrc="/cover.jpg"
thumbnailAlt="产品预览"
videoSrc="/hero.mp4"
/>自定义尺寸
用 className 控制缩略图容器宽度，弹层视频固定为 16:9。
tsx
<HeroVideoDialog
thumbnailSrc="/cover.jpg"
thumbnailAlt="封面"
videoSrc="/hero.mp4"
className="w-full max-w-md"
/>指定播放形态（videoType）
自动判别只看扩展名，不够准时用 videoType 明确指定：第三方平台（YouTube / Bilibili 等）的 embed 地址传 "embed"，没有扩展名的视频直链传 "video"。下面刻意把本地视频文件按 "embed" 挂进 iframe——画面照样出来，但没有 poster、控件样式不受控，这就是形态选错时页面上的样子。
tsx
<HeroVideoDialog
thumbnailSrc="/cover.jpg"
thumbnailAlt="产品预览"
videoSrc="/hero.mp4"
videoType="embed"
/>何时用
落地页/营销页放一张视频缩略图 + 播放钮，点击后弹出 Portal 模态播放视频，支持 Esc/遮罩关闭并锁背景滚动。两种视频源都支持：第三方嵌入页（YouTube/Bilibili 的 embed 地址，走 iframe）与自托管视频文件（.mp4/.webm 等，走原生 <video>）。需要通用模态承载任意内容用 Dialog；需要播放器全套控制（进度/倍速/PiP）或播 HLS 用 Video 播放器组件。
导入
ts
import { HeroVideoDialog } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| thumbnailSrc* | string | - | 缩略图地址 |
| thumbnailAlt | string | - | 缩略图 alt 文本 |
| videoSrc* | string | - | 视频地址：embed 形态是 iframe 的 src（如 youtube/bilibili embed），video 形态是视频文件地址（.mp4/.webm 等） |
| videoType | "auto" | "embed" | "video" | "auto" | 弹层里用什么播。"embed" 挂 iframe，"video" 挂原生 <video>；"auto" 按 videoSrc 扩展名判别（.mp4/.webm/.ogv/.ogg/.mov/.m4v 走 "video"，其余走 "embed"） |
| className | string | - | 额外类名（控制缩略图尺寸等） |
禁忌 / 坑
- 用第三方平台时
videoSrc必须是 embed 地址（.../embed/...），不是普通观看页 URL，否则模态内 iframe 加载失败。 - 自动判别只看扩展名。如果视频文件藏在没有扩展名的地址后面（
/api/video?id=1、签名直链等），"auto"会判成 embed 并挂上 iframe —— 浏览器自带的媒体查看器仍会把它放出来，画面正常但没有 poster、控件样式不受控，光看页面不容易发现选错了。这类地址请显式传videoType="video"。 - 反过来，embed 地址里如果带
.mp4之类的路径片段，"auto"会误判成 video，请显式传videoType="embed"。 - HLS（
.m3u8）刻意不在自动判别范围内：只有 Safari 原生放得动，Chrome/Firefox 需要 hls.js。要放 HLS 用 Video 播放器组件，不要硬传videoType="video"。 videoType="video"时弹层里的<video>带autoPlay；若被浏览器的自动播放策略拦下，控件仍在，用户点一下即可播放。- 缩略图尺寸靠
className（如w-80）控制，组件本身不设固定宽度。
相关
Playground
<HeroVideoDialog
thumbnailSrc="/cover.jpg"
videoSrc="/hero.mp4"
/>