A HTML5 video player component for Vue.js
Switch branches/tags
Nothing to show
Clone or download
Latest commit d06bd2f Jul 17, 2017
Permalink
Failed to load latest commit information.
.babelrc init Jun 22, 2016
.editorconfig init Jun 22, 2016
.eslintrc.js init Jun 22, 2016
.gitignore init Jun 22, 2016
README.md update: readme demo link Jul 17, 2017
package.json add: vue 2.0 support Jul 14, 2017
preview.png add: preview images Jun 24, 2016
preview2.png add: preview images Jun 24, 2016
video.vue add: vue 2.0 support Jul 14, 2017

README.md

vue-video

A HTML5 video player component for Vue.js

Demo

live demo is here: https://hilongjw.github.io/vue-video/

Installation

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