A HTML5 video player component for Vue.js
live demo is here: https://hilongjw.github.io/vue-video/
npm i vue-video --save
// 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>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'
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent