Skip to content

Latest commit

 

History

History
176 lines (130 loc) · 4.23 KB

README.md

File metadata and controls

176 lines (130 loc) · 4.23 KB
Raw

vue-player

Simple, lightweight, vue.js HTML5 audio/video player

GitHub version bundlephobia vue2 CodeFactor License

Table of Contents

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

audio

<vue-player audio />

video

<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

Author

License

MIT