🎬 多媒体模块
视频和多媒体播放组件，提供丰富的媒体展示能力。
组件列表 (3个)
| # | 组件 | 中文名称 | Figma 链接 | 状态 |
|---|---|---|---|---|
| 1 | MediaPlayerBase | 视频播放器模块1 | 查看设计稿 | 已经发布 |
| 2 | MediaPlayerMulti | 视频播放器_图文分栏 | 查看设计稿 | 已经发布 |
| 3 | MediaPlayerSticky | 视频播放器模块1（滚屏动画） | 查看设计稿 | 已经发布 |
使用场景
多媒体模块适用于：
- ✅ 产品演示视频
- ✅ 品牌宣传片
- ✅ 使用教程
- ✅ 用户评测
功能特点
MediaPlayerBase
- 标准播放控制（播放/暂停/进度条）
- 支持自动播放和循环
- 响应式尺寸适配
MediaPlayerMulti
- 视频与文字并排展示
- 支持多个视频片段切换
- 适合功能讲解场景
MediaPlayerSticky
- 滚动触发播放
- 视差滚动效果
- 沉浸式观看体验
导入方式
import {
MediaPlayerBase,
MediaPlayerMulti,
MediaPlayerSticky
} from '@anker-in/headless-ui/biz'
export default function MediaPage() {
return (
<>
<MediaPlayerBase data={videoData} />
<MediaPlayerMulti data={multiData} />
<MediaPlayerSticky data={stickyData} />
</>
)
}视频规范
- 格式: MP4 (H.264 编码)
- 分辨率: 1920x1080 (推荐)
- 码率: 2-5 Mbps
- 时长: 30秒 - 2分钟（推荐）
Last updated on