---
name: Video
title: 视频
category: 视频组件
owner: 刁佳佳
---

## 示例
```atom 基础示例
<template>
    <view id="video-test">
        <video
            :src=src
            :poster=poster
            :controls=controls
            :autoplay=autoplay
            :object-fit="objectFit"
        >
        </video>
    </view>
</template>

<script>
export default {
    config: {
        navigationBarTitleText: 'Test Video'
    },
    data() {
        return {
            src: 'http://www.w3school.com.cn/i/movie.mp4',
            poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552467242&di=ec498504623ce533e8ac0f9b7b86b858&imgtype=jpg&er=1&src=http%3A%2F%2Fdingyue.nosdn.127.net%2FKnd3m9LlXi7F77IHU%3DDxFIpAXjGzXADzH8ASM5ziKG29H1526567058002compressflag.jpg',
            controls: true,
            autoplay: true,
            hide: false,
            objectFit: 'contain'
        }
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
#video-test{
    width: 414px;
    height: 150px;
}
</style>
```
## API
### Props


名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
src | string | - | 可选 | 要播放视频的资源地址 | -
loop | boolean | - | 可选 | 是否循环播放 | -
controls | boolean | - | 可选 | 是否显示默认控件 | -
autoplay | boolean | - | 可选 | 是否自动播放 | -
muted | boolean | - | 可选 | 是否默认静音 | -
poster | string | - | 可选 | 默认控件上的音频封面的图片资源地址，如果&nbsp;controls&nbsp;属性值为&nbsp;false&nbsp;则设置&nbsp;poster&nbsp;无效 | -
width | number | - | 可选 | 视频容器的宽高 | -
height | number | - | 可选 | 视频容器的宽高 | -
hide | boolean | - | 可选 | - | -
duration | string | - | 可选 | 视频时长 | -



### Events


- **error**: 当发生错误时触发

名称 | 类型 | 描述
--- | --- | ---
detail | Object | 错误信息
  errMsg | number | 错误码：1&nbsp;网络错误,&nbsp;2&nbsp;解码错误,&nbsp;3&nbsp;解码错误，4&nbsp;不合适资源

- **pause**: 当暂停播放时触发
	无参数

- **play**: 当开始/继续播放时触发
	无参数

- **ended**: 当播放到末尾时触发
	无参数

- **timeupdate**: 当播放进度改变时触发

名称 | 类型 | 描述
--- | --- | ---
detail | Object | 具体信息
  duration | number | 当前音频/视频的长度
  currentTime | number | 当前播放时间点