Skip to content

meyt/vue-md-player

Repository files navigation

vue-md-player

Build Status View this project on NPM

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

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.