tb-shop-video/readme.md

single video component for tbshop

# tb-shop-video

## install
```bash
npm install tb-shop-picture --save
```

## 引用
```json
"usingComponents": {
  "tb-shop-video": "tb-shop-video"
}
```

## 使用
```jsx
<tb-shop-video 
  modUtils="{{data.modUtils}}"
  gdc="{{data.gdc}}"
  mds="{{data.mds}}"
  videoId="videoId"
  src="xxxx.mp4"
  time="{{30}}"
  poster="xxxxx.png"
  width="{{300}}"
  height="{{400}}"
  showMuted="{{true}}"
  showTime="{{false}}"
  canPause="{{false}}"
  muted="{{muted}}"
  onTimeUpdate="handleTimeUpdate"
  onPlay="handlePlay"
  onPause="handlePause"
  onEnded="handleEnded"
/>
```

## 属性
#### modUtils、gdc、mds
- 必填
- 透传props里的参数。

#### videoId
- 必填
- 旺铺上传视频后获得的视频id

#### src
- 必填
- 视频资源地址

#### poster
- 必填（为了各种场景的适配和降级，请务必传入）
- 视频封面图

#### width
- 必填
- 视频宽度

#### height
- 必填
- 视频高度

#### showMuted
- 可不传
- 是否显示静音按钮（ide上静音功能有bug，点击不能静音）

#### showTime
- 可不传
- 是否展示倒计时

#### time
- 可不传, showTime为true时必须传
- 视频的总时长

#### canPause
- 可不传
- 是否可以通过点击暂停播放


#### muted
- 可不传，默认true（静音状态）
- true or false 当props变化时候会触发播放器的静音操作。

#### object-fit
- 可不传，默认contain
- contain, fill 视频的填充方式。

#### onTimeUpdate
- 可不传
- 播放时间更新的回调，传入function
#### onPlay
- 可不传
- 视频播放的回调，传入function
#### onPause
- 可不传
- 视频暂停播放的回调，传入function
#### onEnded
- 可不传
- 视频播放完成后的回调，传入function