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 | 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. |