0.5.3 • Published 4 years ago
@iomariani/vue-player v0.5.3
vue-player
Simple, lightweight, vue.js HTML5 audio/video player
Table of Contents
- Demo
- Install
- Usage - Global - Local - CSS - HTML
- Props - Sources
- Styling - Available Variables
- Todo
- Credits
- Author
- License
Demo
Available at codesandbox.io (sandbox)
Install
npm install @iomariani/vue-player
Usage
Global
If you want the component to be available globally:
import Vue from 'vue'
import VuePlayer from '@iomariani/vue-player'
Vue.component('vue-player', VuePlayer)
Local
If you want the component to be available locally:
import VuePlayer from '@iomariani/vue-player'
new Vue({
components: {
VuePlayer
}
})
CSS
The component css is available seperately. You can just import it by:
import '@iomariani/vue-player/dist/vue-player.css'
HTML
<vue-player audio />
<vue-player video />
Props
Param | Type | Description | Default |
---|---|---|---|
exclusive | Boolean | Allow only one player playing at a time | true |
autoplay | Boolean | Audio/video autoplay property | false |
loop | Boolean | Audio/video loop property | false |
color | String | Color to use at the active trackbar | #2f96fd |
theater | Boolean or String ("fullscreen") | Wrap the player with an overlay div, if param is fullscreen will show overlay only when in fullscreen | false |
overlayBlur | Boolean | Add a blur filter effect to the overlay | false |
overlayColor | String | Color to use on the overlay div | #000000e6 |
Audio Props | |||
audio | Boolean | Set player type as audio | false |
sources | Object | Declaration example below | |
Video Props | |||
video | Boolean | Set player type as video | false |
videoWidth | String | Video width | 100% |
videoHeight | String | Video height | auto |
poster | String | URL of the poster image | |
fullscreen | String | Type of fullscreen to use. See types below | both |
autoFullscreen | Boolean | Active fullscreen mode on play | false |
sources | Object | Declaration example below | |
viewport | Function | Element to scale to | window |
Fullscreen Types | |||
native | Browser native requestFullscreen method | ||
scale | Scale the player to the viewport | ||
both | Enable both native and scale methods |
Sources
Sources must be declared as an object as type
:source
. Example:
const audioSources = {
"audio/mp3": "//localhost/music.mp3",
...
};
const videoSources = {
"video/mp4": "//localhost/video.mp4",
"video/webm": "//localhost/video.webm",
...
};
Styling
If you want to style the player you can do so by importing the scss file:
<style lang="scss">
@import '@iomariani/vue-player/src/scss/vue-player.scss';
</style>
Available Variables
$var | default |
---|---|
$player-background | #f0f0f0 |
$player-border-radius | 20px |
$player-buffer-background | #ffffff33 |
$player-fullscreen-z-index | 100000 |
Todo
- Loading/buffering icon
- Volume slider
- Trackbar seeker on drag
- Emmit player events
- Viewport Prop for
scale
fullscreen - Skip forward 10s
- Skip backwards 10s
- Custom Fullscreen
scale
- Theater Mode
- Exclusive Mode
Credits
- Icons by feathericons.com