Mini Clean Video And Audio Player Component - vue-md-player

Install & Download:

# NPM
$ npm i vue-md-player

Description:

The vue-md-player allows you to create minimal, clean, customizable video and audio players in Vue 3 applications.

How to use it:

1. Import and register the vue-md-player.

import { AudioPlayer, VideoPlayer } from 'vue-md-player'
// stylesheet
import 'vue-md-player/dist/style.css'

export default {
  components: {
    AudioPlayer,
    VideoPlayer
  }
}

2. Add the video & audio player components to the template.

<template>
  <div>
    <video-player src="video.mp4" />
    <audio-player src="audio.mp3" />
  </div>
</template>

3. Available props for the audio player.

width: {
  type: Number,
  default: null
},
height: {
  type: Number,
  default: null
},
doubleClickFullscreen: {
  type: Boolean,
  default: false
},
contain: {
  type: Boolean,
  default: false
},
poster: {
  type: String,
  default: null
},
playsinline: {
  type: Boolean,
  default: false
},
contain: {
  type: Boolean,
  default: false
},
playIcon: {
  type: String,
  default: playIcon
},
pauseIcon: {
  type: String,
  default: pauseIcon
},
replayIcon: {
  type: String,
  default: replayIcon
},
volumeOffIcon: {
  type: String,
  default: volumeOffIcon
},
volumeOnIcon: {
  type: String,
  default: volumeOnIcon
},
fullscreenIcon: {
  type: String,
  default: fullscreenIcon
},
fullscreenExitIcon: {
  type: String,
  default: fullscreenExitIcon
},

4. Available props for the audio player.

light: {
  type: Boolean,
  default: false
},
playIcon: {
  type: String,
  default: playIcon
},
pauseIcon: {
  type: String,
  default: pauseIcon
},
replayIcon: {
  type: String,
  default: replayIcon
},
volumeOffIcon: {
  type: String,
  default: volumeOffIcon
},
volumeOnIcon: {
  type: String,
  default: volumeOnIcon
},