xiaoye-components

Appearance

VideoPlayer 视频播放器 ​

xy-video-player 统一承接视频预览、回放和培训内容播放。

基础用法 ​

适合后台审核、录播回放和媒体详情页。

封面、尺寸与播放器配置 ​

poster、尺寸和 options 适合审核页、详情页和带品牌皮肤的媒体展示。

外部切换片源 ​

通过响应式 sources 和 expose 的 load，可以把播放器接进回放列表或多清晰度切换场景。

审核工作台 ​

这个示例更接近后台审核台或录播回放页的真实布局：主播放器在左，审核信息和切片导航在右。

视频审核工作台
片段列表
审核结论
待复核疑似异常停留

当前片段为《门店入口回放》，建议结合门店日志进一步确认当班情况。

与增强层组合 ​

在详情页中，VideoPlayer 往往不是单独存在，而是作为 DetailPage 某个 section 的媒体预览区出现。

门店巡检详情

DetailPage 负责承接详情页结构，VideoPlayer 放在媒体预览 section 中。

基础信息

门店
杭州武林店
审核状态
待复核
巡检时间
2026-03-30 13:40
审核人
小叶

视频片段

把 VideoPlayer 直接接入 DetailPage 的详情 section。

重点关注收银区停留建议结合门店日志复核
附件信息
关键帧截图.zip3.4 MBsuccess
操作日志
发起视频审核
运营质检组处理中
2026-03-30 14:15

与 DetailPage 组合 ​

当视频预览进入正式详情页时，通常由 DetailPage 负责头部、变更记录和日志，VideoPlayer 负责媒体预览本身。

门店巡检视频

DetailPage 负责详情页骨架，VideoPlayer 负责视频预览与回放。

审核摘要

门店
深圳海岸城店
拍摄人
巡检专员
审核标签
疑似异常停留
当前状态
待复核

视频预览

变更对比
风险判定changed
待处理
需复核停留行为
操作日志
提交审核
运营质检组成功
2026-03-30 10:05

使用约定 ​

  • 组件统一基于 video.js，对外只保留一个播放器入口。
  • sources 是当前唯一公开的片源协议；切换清晰度或视频时由外部更新 sources。
  • options 透传给 video.js 初始化参数，适合开启特定控制条或自定义行为。
  • 如果只想更新片源而不改其他参数，可以优先通过 expose 的 load 主动加载。

API ​

VideoPlayerSource ​

字段说明类型
src视频地址string
type视频 MIME 类型string

VideoPlayer Attributes ​

属性说明类型默认值
sources视频源列表VideoPlayerSource[][]
poster封面图地址string''
autoplay是否自动播放booleanfalse
controls是否显示控制条booleantrue
loop是否循环播放booleanfalse
muted是否静音booleanfalse
preload预加载策略VideoPlayerProps["preload"]'metadata'
width容器宽度string | number'100%'
height容器高度string | number360
options透传给 video.js 的配置项VideoPlayerProps["options"]{}

VideoPlayer Events ​

事件说明参数
init播放器实例初始化后触发VideoPlayerPlayerHandler
ready播放器实例可用后触发VideoPlayerPlayerHandler
play开始播放时触发VideoPlayerStateChangeHandler
pause暂停播放时触发VideoPlayerStateChangeHandler
ended播放结束时触发VideoPlayerStateChangeHandler

VideoPlayer Exposes ​

暴露项说明类型
player当前 video.js 实例引用VideoPlayerInstance["player"]
play开始播放VideoPlayerInstance["play"]
pause暂停播放VideoPlayerInstance["pause"]
load加载指定片源列表VideoPlayerInstance["load"]