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
• [x] Viewport Prop for scale fullscreen
• [x] Skip forward 10s
• [x] Skip backwards 10s
• [x] Custom Fullscreen scale
• [x] Theater Mode
• [x] Exclusive Mode

Credits

• Icons by feathericons.com

Author

• Marcos Mariani

License

MIT