Vue-md-player NPM

vue-md-player

Lightweight HTML5 video and audio player component for Vue.

Demo - Codepen

README for Vue 2 users

Screenshots

Video Player

video player

Audio Player

audio player

Install

npm install --save vue-md-player

Usage

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

<script>
import { AudioPlayer, VideoPlayer } from 'vue-md-player'
import 'vue-md-player/dist/style.css'
export default {
  components: {
    AudioPlayer,
    VideoPlayer
  }
}
</script>

Properties

Property	Player	Type	Default	Description
`autoplay`	VideoAudio	Boolean	false	Play automatically as soon as it can do.
`contain`	Video	Boolean	false	Fit the video to container size.
`crossorigin`	VideoAudio	String	-	Read on MDN
`double-click-fullscreen`	Video	Boolean	false	Go to fullscreen mode by double-click on the video.
`light`	VideoAudio	Boolean	false	Enable light theme.
`loop`	VideoAudio	Boolean	false	Automatically seek back to the start upon reaching the end of the audio/video.
`muted`	VideoAudio	Boolean	false	Indicates whether the audio will be initially silenced.
`playsinline`	Video	Boolean	false	Some browsers prefer to play video in fullscreen, force them to play inline.
`poster`	Video	String	-	A URL for an image to be shown while the video is downloading.
`preload`	VideoAudio	String	metadata	`none`: Indicates that the audio/video should not be preloaded.`metadata`: Indicates that only audio/video metadata (e.g. length) is fetched.`auto`: Indicates that the whole audio/video file can be downloaded, even if the user is not expected to use it.
`src`	VideoAudio	String	-	The URL of the video or audio to embed.