# vue-video

**Repository Path**: clattanoia/vue-video

## Basic Information

- **Project Name**: vue-video
- **Description**: vue  h5视频插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-04-09
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-video

> A HTML5 video player component for Vue.js

## Demo

live demo is here: [https://hilongjw.github.io/vue-video/ocean.html](https://hilongjw.github.io/vue-video/ocean.html )
![](https://raw.githubusercontent.com/hilongjw/vue-video/master/preview.png)
![](https://raw.githubusercontent.com/hilongjw/vue-video/master/preview2.png)


## Instllation
```bash

npm i vue-video --save-dev

```


## Usage

```
// script
import myVideo from 'vue-video'
export default {
    data () {
        return {
            video: {
                sources: [{
                    src: 'http://covteam.u.qiniudn.com/oceans.mp4',
                    type: 'video/mp4'
                }],
                options: {
                    autoplay: true,
                    volume: 0.6,
                    poster: 'http://covteam.u.qiniudn.com/poster.png'
                }
            }
        }
    },
    components: {
        myVideo
    }
}
```

```html
<template>
    <div id="app">
        <div class="container">
            <my-video :sources="video.sources" :options="video.options"></my-video>
        </div>
    </div>
</template>
```

## API

> sources

```
sources: [{
    // video uri
    src: 'http://covteam.u.qiniudn.com/oceans.mp4',
    // video meta type
    type: 'video/mp4'
}]

```

> options

```
options: {
    // autoplay
    autoplay: true,
    // default volume
    volume: 0.6,
    // poster (cover image)
    poster: 'http://covteam.u.qiniudn.com/poster.png'
}
```