@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

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

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