视频播放器
- 支持自定义控制栏(伪全屏、进度条拖动)
- 支持多个视频切换播放
- 支持同层播放
- 播放完毕自定义插槽
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| src | 视频播放地址 | String | 无 |
| poster | 预览封面,可以传入图片地址或者图片地址 src 和显示样式 style 的对象。 style 可选属性: - default 居中1:1显示。 - stretch 拉伸铺满播放器区域,图片可能会变形。 - cover 优先横向等比拉伸铺满播放器区域,图片某些部分可能无法显示在区域内。 |
String/Object | 无 |
| title | 视频标题 | String | 无 |
| width | 设置播放器宽度,单位为像素 | Number | 100% (16:9) |
| height | 设置播放器高度,单位为像素 | Number | 100% (16:9) |
| volume | 设置初始音量,范围0-1 | Number | 0.5 |
| autoplay | 是否自动播放 大部分移动端浏览器不生效,必须静音播放 |
Boolean | false |
| controls | default 显示默认控件 none 不显示控件 custom 定制控件 |
String | 'default' |
| button-group | controls = 'custom' 时定制控件按钮 控件可选属性(从左往右): - barrage 弹幕。 - volume 音量。 - systemFullscreen/fullscreen 全屏(系统/伪)。 |
Array | ['systemFullscreen'] |
| x5-type | video 属性'x5-video-player-type'声明 调用同层播放器 | Boolean | true |
| 事件 | 说明 |
|---|---|
| end | 视频播放结束时的自定义内容 |
| 事件 | 说明 | 参数 |
|---|---|---|
| play | 播放视频回调事件 | event |
| pause | 暂停视频回调事件 | event |
| loaded-metadata | 元数据(比如分辨率和时长)被加载时运行的回调事件 | event |
| loaded-data | 媒介数据已加载时回调事件 | event |
| progress | 当浏览器正在获取媒介数据时运行的回调事件 | event |
| time-update | 当播放位置改变时(比如用户快进时)运行的回调事件 | event |
| ended | 当媒介已到达结尾时运行的回调事件 | event |
| error | 当在文件加载期间发生错误时运行的回调事件 | event |
| volume-change | 音量变化回调事件 | event |
| playing | 视频已开始播放时视频 | event |
| waiting | 视频已停止播放但打算继续播放时(缓冲中)事件 | event |
当音频/视频处于加载过程中时,会依次发生以下事件: