https://github.com/meyt/vue-md-player

Lightweight HTML5 video and audio player component for vuejs
https://github.com/meyt/vue-md-player

Last synced: 3 months ago
JSON representation

Lightweight HTML5 video and audio player component for vuejs

Host: GitHub
URL: https://github.com/meyt/vue-md-player
Owner: meyt
License: mit
Created: 2019-07-27T05:32:34.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2023-10-22T11:37:03.000Z (over 1 year ago)
Last Synced: 2025-02-22T13:51:19.209Z (4 months ago)
Language: Vue
Homepage: https://meyt.github.io/vue-md-player
Size: 4.98 MB
Stars: 20
Watchers: 2
Forks: 5
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# vue-md-player

[![Build Status](https://github.com/meyt/vue-md-player/actions/workflows/main.yaml/badge.svg?branch=master)](https://github.com/meyt/vue-md-player/actions)
[![View this project on NPM](https://img.shields.io/npm/v/vue-md-player.svg)](https://www.npmjs.com/package/vue-md-player)

Lightweight HTML5 video and audio player component for Vue.

[Demo](https://meyt.github.io/vue-md-player) - [Codepen](https://codepen.io/barname_nevis/pen/rNKapaY)

[README for Vue 2 users](https://github.com/meyt/vue-md-player/tree/v1)

## Screenshots

### Video Player

![video player](https://github.com/meyt/vue-md-player/raw/master/stuff/video-player-screenshot.png?raw=true)

### Audio Player

![audio player](https://github.com/meyt/vue-md-player/raw/master/stuff/audio-player-screenshot.png?raw=true)

## Install

Vue 3
```
npm install --save vue-md-player
```

## Usage

```vue

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

```

## 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#crossorigin) |
| `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. |

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/meyt/vue-md-player

Awesome Lists containing this project

README