amis2/docs/zh-CN/components/video.md

title	description	type	group	menuName	icon	order
Video 视频		0	⚙ 组件	Video		71

基本用法

{
    "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"
}

flv 和 hls 直播

需要设置 isLive: true，目前 flv 和 hls 是通过文件后缀来判断的，还可以通过设置 videoType 来指定，它有两个值：

• video/x-flv，使用 mpegts.js 播放 flv
• application/x-mpegURL，使用 hls.js 播放 hls 格式

视频帧切换功能

可以定义一组视频帧，渲染的时候会列出来这些帧，点击的时候会自动跳转到对应位置开始播放。

{
    "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': ''
    },
}

可以设置帧图片如果有的话，这个示例偷懒直接用封面了。

{
    "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'
    },
}

属性表

属性名	类型	默认值	说明
type	string	"video"	指定为 video 渲染器
className	string		外层 Dom 的类名
src	string		视频地址
isLive	boolean	false	是否为直播，视频为直播时需要添加上，支持flv和hls格式
videoType	string		指定直播视频格式
poster	string		视频封面地址
muted	boolean		是否静音
loop	boolean		是否循环播放
autoPlay	boolean		是否自动播放
rates	array		倍数，格式为[1.0, 1.5, 2.0]
frames	object		key 是时刻信息，value 可以可以为空，可有设置为图片地址，请看上方示例
jumpBufferDuration	boolean		点击帧的时候默认是跳转到对应的时刻，如果想提前 3 秒钟，可以设置这个值为 3
stopOnNextFrame	boolean		到了下一帧默认是接着播放，配置这个会自动停止