2020-07-28 10:03:53 +08:00
|
|
|
|
---
|
|
|
|
|
title: Video 视频
|
2020-08-04 19:21:46 +08:00
|
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: Video
|
2020-08-04 19:21:46 +08:00
|
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
|
order: 71
|
|
|
|
|
---
|
2019-05-08 22:55:41 +08:00
|
|
|
|
|
2020-08-04 19:21:46 +08:00
|
|
|
|
## 基本用法
|
2020-07-28 10:03:53 +08:00
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
```schema: scope="body"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "video",
|
|
|
|
|
"src": "raw:https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4",
|
|
|
|
|
"poster": "raw:https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-08-06 16:10:12 +08:00
|
|
|
|
## flv 和 hls 直播
|
|
|
|
|
|
|
|
|
|
需要设置 `isLive: true`,目前 flv 和 hls 是通过文件后缀来判断的,还可以通过设置 videoType 来指定,它有两个值:
|
|
|
|
|
|
|
|
|
|
- `video/x-flv`,使用 [mpegts.js](https://github.com/xqq/mpegts.js) 播放 flv
|
|
|
|
|
- `application/x-mpegURL`,使用 [hls.js](https://github.com/video-dev/hls.js/) 播放 hls 格式
|
|
|
|
|
|
2022-02-28 18:45:33 +08:00
|
|
|
|
## 视频帧切换功能
|
|
|
|
|
|
|
|
|
|
可以定义一组视频帧,渲染的时候会列出来这些帧,点击的时候会自动跳转到对应位置开始播放。
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "video",
|
|
|
|
|
"src": "https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4",
|
|
|
|
|
"poster": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png",
|
|
|
|
|
"jumpFrame": true,
|
|
|
|
|
"jumpBufferDuration": 0,
|
|
|
|
|
frames: {
|
|
|
|
|
'00:10': '',
|
|
|
|
|
'00:20': '',
|
|
|
|
|
'00:30': ''
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
可以设置帧图片如果有的话,这个示例偷懒直接用封面了。
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "video",
|
|
|
|
|
"src": "https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4",
|
|
|
|
|
"poster": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png",
|
|
|
|
|
"jumpFrame": true,
|
|
|
|
|
"jumpBufferDuration": 0,
|
|
|
|
|
stopOnNextFrame: true,
|
|
|
|
|
frames: {
|
|
|
|
|
'00:10': 'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png',
|
|
|
|
|
'00:20': 'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png',
|
|
|
|
|
'00:30': 'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png'
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
|
## 属性表
|
2019-05-08 22:55:41 +08:00
|
|
|
|
|
2022-02-28 18:45:33 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------------------ | --------- | --------- | ------------------------------------------------------------------------- |
|
|
|
|
|
| type | `string` | `"video"` | 指定为 video 渲染器 |
|
|
|
|
|
| className | `string` | | 外层 Dom 的类名 |
|
|
|
|
|
| src | `string` | | 视频地址 |
|
|
|
|
|
| isLive | `boolean` | false | 是否为直播,视频为直播时需要添加上,支持`flv`和`hls`格式 |
|
|
|
|
|
| videoType | `string` | | 指定直播视频格式 |
|
|
|
|
|
| poster | `string` | | 视频封面地址 |
|
|
|
|
|
| muted | `boolean` | | 是否静音 |
|
|
|
|
|
| autoPlay | `boolean` | | 是否自动播放 |
|
|
|
|
|
| rates | `array` | | 倍数,格式为`[1.0, 1.5, 2.0]` |
|
|
|
|
|
| frames | `object` | | key 是时刻信息,value 可以可以为空,可有设置为图片地址,请看上方示例 |
|
|
|
|
|
| jumpBufferDuration | `boolean` | | 点击帧的时候默认是跳转到对应的时刻,如果想提前 3 秒钟,可以设置这个值为 3 |
|
|
|
|
|
| stopOnNextFrame | `boolean` | | 到了下一帧默认是接着播放,配置这个会自动停止 |
|