@iomariani/vue-player

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

Author

• Marcos Mariani

License

MIT

Changelog

[0.5.3] - 2020-10-09

Added

• Theater prop as fullscreen to enable only when fullscreen is active