https://github.com/hilongjw/vue-video

A HTML5 video player component for Vue.js
https://github.com/hilongjw/vue-video

video-player vue vue-video

Last synced: 7 days ago
JSON representation

A HTML5 video player component for Vue.js

• Host: GitHub
• URL: https://github.com/hilongjw/vue-video
• Owner: hilongjw
• Created: 2016-06-22T13:27:23.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-18T15:14:30.000Z (over 6 years ago)
• Last Synced: 2024-03-23T18:34:33.326Z (10 months ago)
• Topics: video-player, vue, vue-video
• Language: Vue
• Homepage: https://hilongjw.github.io/vue-video
• Size: 1.12 MB
• Stars: 327
• Watchers: 9
• Forks: 96
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue - vue-video - video?style=social) - Vue.js的HTML5视频播放器 (UI组件)
• awesome-github-vue - vue-video - Vue.js的HTML5视频播放器 (UI组件)
• awesome-github-vue - vue-video - Vue.js的HTML5视频播放器 (UI组件)
• awesome - vue-video - Vue.js的HTML5视频播放器 (UI组件)

README

        
# vue-video

> A HTML5 video player component for Vue.js

## Demo

live demo is here: [https://hilongjw.github.io/vue-video/](https://hilongjw.github.io/vue-video/)

![](https://raw.githubusercontent.com/hilongjw/vue-video/master/preview.png)

![](https://raw.githubusercontent.com/hilongjw/vue-video/master/preview2.png)

## Installation

```bash

npm i vue-video --save

```

## 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

    


        


            

        

    


```

## 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'

}

```