Video 视频

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

用于播放视频的组件,支持自定义封面图、宽高比及播放器尺寸。

基础用法

通过 src 指定视频资源,poster 设置封面图,aspectRatio 控制宽高比。
Template 示例:
<Video src="https://www.w3schools.com/html/mov_bbb.mp4" poster="https://www.w3schools.com/html/pic_trulli.jpg" aspectRatio="16:9" />
效果展示如下:




属性说明

属性名
类型
描述
默认值
src
string
视频资源 URL
-
poster
string
视频封面图片 URL
-
aspectRatio
"16:9" | "9:16" | "4:3" | "3:4"
播放器宽高比
"16:9"
size
"sm" | "md" | "lg"
播放器尺寸
-
注意:
★ 标记为必填属性。

尺寸说明

尺寸
宽度
适用场景
sm
260px
侧边栏、小卡片
md
320px
常规内容区
lg
480px
主要内容区
默认
100%
自适应容器宽度 (最小 260px,最大 100%)

宽高比说明

16:9:标准宽屏比例(推荐)。
9:16:竖屏比例(适合移动端)。
4:3:传统电视比例。
3:4:竖屏传统比例。

播放器功能

视频播放器默认提供以下功能:
播放/暂停控制。
音量控制。
全屏播放。
进度条拖拽。
播放速度调整。