vue-md-player

Lightweight HTML5 video and audio player component for Vue.

Demo - Codepen

README for Vue 2 users

Screenshots

Video Player

Audio Player

Install

Vue 3

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	Video Audio	Boolean	false	Play automatically as soon as it can do.
contain	Video	Boolean	false	Fit the video to container size.
crossorigin	Video Audio	String	-	Read on MDN
double-click-fullscreen	Video	Boolean	false	Go to fullscreen mode by double-click on the video.
light	Video Audio	Boolean	false	Enable light theme.
loop	Video Audio	Boolean	false	Automatically seek back to the start upon reaching the end of the audio/video.
muted	Video Audio	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	Video Audio	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	Video Audio	String	-	The URL of the video or audio to embed.